Bars, lines and areas in one chart, to compare measures that work together. Use it when one number explains another, such as visits (bars) and conversion (line).
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.
Give each item of series a type: bar, area or line. A series without a type is a line.
Measures with different scales need their own axis. Turn on withRightYAxis and set yAxisId: 'right' on the series that uses it.
| 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 | what 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 number is written | (value: number) => string | - | thousands separators, en-US |
| curve | how the lines join the points | string | 'linear', 'monotone', 'step' | monotone |
| withDots | draw a dot on each point of a line | boolean | - | true |
| connectNulls | draw lines through null values | boolean | - | false |
| withRightYAxis | add a second y axis on the right | 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
type?: 'line' | 'bar' | 'area' // `line` when missing
yAxisId?: 'left' | 'right' // `right` needs `withRightYAxis`
}
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 data and show the values in the tooltip.
When the series are different measures, repeat the key numbers in text next to the chart, or offer the same data in a Table.