Bars that compare values across categories, side by side or stacked. Use it to compare totals of different groups.
Charts need Recharts. Install it once with
yarn add recharts, then import from@bolio-ui/core/charts. The package stays out of your bundle until you use a chart.
One bar per row of data for each series.
Several series sit side by side. Add withLegend to name them.
With stacked, the series pile up in one bar.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | one object per point on the x axis | Array<Record<string, ...>> | - | - |
| dataKey | key of data that holds the x axis label | string | - | - |
| series | the lines to draw, one per key of data | ChartSeries[] | ChartSeries | - |
| height | height of the chart, in pixels | number | - | 300 |
| withLegend | show the legend | boolean | - | false |
| withTooltip | show the values of a point on hover and focus | boolean | - | true |
| withXAxis | show the x axis | boolean | - | true |
| withYAxis | show the y axis | boolean | - | true |
| withGrid | show the horizontal grid lines | boolean | - | true |
| valueFormatter | how a value is written on the y axis and in the tooltip | (value: number) => string | - | - |
| stacked | pile the series in one bar instead of side by side | boolean | - | false |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type ChartSeries = {
name: string // key of `data` with the values
label?: string // shown in the legend and the tooltip, `name` when missing
color?: string // any CSS color, a theme color when missing
}
The ref points at the root div.
Name the chart with aria-label, or with aria-labelledby pointing at a heading. A named chart becomes a group. The chart can be focused. Arrow Left and Right then move through the points and show their values in the tooltip.
A chart is hard to read for screen reader users, so repeat the key numbers in text next to it, or offer the same data in a Table.