Points placed by two numbers, to see how one value relates to another. Use it to look for a pattern or an outlier between two measures.
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.
Each series has its own points, with an x and a y for each one. Name the axes with xAxisLabel and yAxisLabel.
Each series gets its own color. Add withLegend to name them.
valueFormatter changes how a number reads on both axes and in the tooltip.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the series to plot | ScatterSeries[] | ScatterSeries | - |
| height | height of the chart, in pixels | number | - | 300 |
| xAxisLabel | title of the x axis | string | - | - |
| yAxisLabel | title of the y axis | string | - | - |
| 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 grid lines | boolean | - | true |
| valueFormatter | how a number is written on the axes and in the tooltip | (value: number) => string | - | - |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type ScatterSeries = {
name: string // identifies the series
label?: string // shown in the legend, `name` when missing
color?: string // any CSS color, a theme color when missing
points: Array<{ x: number; y: number }>
}
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.
Series differ only by color, so use withLegend and write the pattern you see in text next to the chart.