Lines that follow one or more series across the same axis. Use it to show how a value changes over time.
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.
Pass the rows in data, the key of the x axis in dataKey and one item of series per line.
Each series gets its own theme color, or the color you set. Add withLegend to name them.
Use curve with linear, monotone or step, and turn the dots off with withDots={false}.
valueFormatter changes how a number reads on the y axis and in the tooltip.
| 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 | - | - |
| curve | how the line joins the points | string | 'linear', 'monotone', 'step' | monotone |
| withDots | draw a dot on each point | boolean | - | true |
| connectNulls | draw the line through null values | 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.