Steps that get narrower, to show where people drop off. Use it for a process with ordered stages, such as visit, sign up and purchase.
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 item has a name and a value. Pass the steps from the widest to the narrowest.
Swap the labels for a legend, and use valueFormatter to change how the tooltip reads.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the steps, from the widest to the narrowest | ChartSlice[] | ChartSlice | - |
| height | height of the chart, in pixels | number | - | 300 |
| withTooltip | show the value of a step on hover and focus | boolean | - | true |
| withLegend | show the legend | boolean | - | false |
| withLabels | write the name of each step | boolean | - | true |
| labelsPosition | where the names go | string | 'left', 'right', 'inside' | right |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type ChartSlice = {
name: string // shown in the labels, the legend and the tooltip
value: number // the width of the step
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 data and show the values in the tooltip.
Steps differ by color and width, so keep the names visible with withLabels or withLegend.