BarChart draws a bar for each series in each row of data, grouped by the row's x value. It sits on a bordered card with an optional title and description, a legend and axis labels, and draws with react-native-svg. It takes the same data and series as the web BarChart. Tap a row to see its values.
Each row of data is an object. The x value is the first key that is not a series, here month. Each entry in series names a key that holds a number and gives it a color. A color can be a data color ("blue", "emerald" and the other schemes), any theme color token such as "brand-solid-strong", or a raw #hex value. If you leave out color, the series gets a distinct scheme, as on the web. Give a row a label to show it instead of the x value.
barWidth sets each bar's width: xs (12), s (16), m (24), l (40, the default), xl (64), a number of points, or fill for the whole slot. A bar never gets wider than its share of the row. variant fills the bars with a fading gradient (the default), a solid flat color or only an outline.
axis shows the labels on the x axis, the y axis, both (the default) or none. grid draws lines across the y ticks (the default), down the x rows, both or none. legend.position puts the legend above the plot (top-left, top-center, top-right) or below it (bottom-*). legend.direction="column" stacks the entries and legend.display={false} hides it.
Tap a row to show a tooltip with its label and each series' value. Tap the same row again to hide it, or another row to move it. Add hover to shade the tapped row's band. tooltip={false} turns tapping off. Screen readers read each row as a button labelled with its values, such as "Feb: coffee 150, tea 60".
loading shows a spinner instead of the plot. With no rows, the chart shows emptyState, and with error it shows errorState. Both take a string or your own element.
The chart fills its parent's width, measured with onLayout, so the plot redraws when the screen rotates. The card is 24 rem tall by default. Set height (a number of rem, a spacing token or a percentage, as on Flex) to change it. The header and legend take their own height and the plot takes the rest. BarChart takes the other Flex props too, such as marginTop or border.
- Tapping a row shows the tooltip, instead of hovering. hover shades the tapped row.
- The legend sits above or below the plot, instead of over it.
- There is no date range picker. date.start and date.end still filter the rows, and date.format writes date x values with the common date-fns tokens (yyyy, yy, MMMM, MMM, MM, M, dd, d, EEEE, EEE, HH, mm). date.selector, presets, dual, min, max and onChange are not taken.
- There is no DataThemeProvider. variant is a prop (gradient by default), and data-viz-style sets the color mode per chart.
- reverseX and reverseY are not taken. The x labels are always below and the y labels on the left.
- The y labels take only the width they need, instead of a fixed 64px column. When x labels would overlap, every second (or third, and so on) label is shown.
- Without series, only the keys that hold numbers become series.
- Tooltip values don't count up.
