Flows between steps, with the width of each link following its amount. Use it to follow where something goes, such as visitors across pages or money across budgets.
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.
nodes lists the steps and links joins them by position: source and target are indexes of nodes.
A link takes the color of its source. Set color on a node to choose it.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the steps and the flows between them | { nodes, links } | SankeyNode, SankeyLink | - |
| height | height of the chart, in pixels | number | - | 320 |
| nodeWidth | width of the bars of the steps, in pixels | number | - | 12 |
| nodePadding | vertical space between steps of one column, in pixels | number | - | 24 |
| withTooltip | show the amount of a flow on hover | boolean | - | true |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type SankeyNode = {
name: string
color?: string // any CSS color, a theme color when missing
}
type SankeyLink = {
source: number // position of the step in `nodes`
target: number
value: number // the width of the flow
}
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. A flow chart cannot be read with the keyboard, so describe the main paths in text next to it, or offer the links in a Table.