To use the sankey diagram, import these on top:
import { Sankey } from 'chartformers';
import 'chartformers/dist/chartformers.css';Minimum call:
The chart must be called in a container with width and height set. It will then fill the available space of this container.
<div className="w-full h-60 md:h-96">
<Sankey data={[]} />
</div>The component requires a mandatory data property. The data is an array of objects. Each object in this array contains 3 properties: 'source' which is a string, 'target' which is also a string, and 'value' which is a number property.
Data sample:
export const flightData1 = [
{ source: "Brazil", target: "Portugal", value: 5 }
]#Property Table
| property | description | mandatory | default value |
|---|---|---|---|
| data | The data is an array of objects. Each object in this array contains 3 properties: 'source' which is a string, 'target' which is also a string, and 'value' which is a number property. | Yes | [] |
| tooltipFormat | See below | No | {} |
About tooltipFormat prop
For most chart types you can pass the optional tooltipFormat prop. This prop has 3 properties: formatType, prefix and suffix, all are optional.
| formatType | prefix | suffix |
|---|---|---|
| either 'long' or 'short', default is 'long'. If given a number value of 1500, 'long' will format the value into '1,500', while 'short' will format into '1,5k'. Optional property. | prefix for the given number value, optional property. eg: 'US$' | suffix for the given number value, optional property. eg: 'KWh' |
Example use:
if given number value of 1500:
<Sankey data={[...]} tooltipFormat={{ prefix:"US$ " }} />
with default 'formatType' as 'long', will render 'US$ 1,500' at the tooltip component.
Hint: In this example the US$ prefix has a single space at the end. If you want to put space between prefix and the value, do so by manually typing the space at the end of the prefix.
<Sankey data={[...]} tooltipFormat={{ formatType: "short", suffix:" KWh" }} />
with the 'formatType' as 'short', will render '1,5k KWh' at the tooltip component.
Hint: In this example the KWh suffix has a single space at the start. If you want to put space between suffix and the value, do so by manually typing the space at the start of the suffix.