Sankey chart

A Sankey chart is a type of flow diagram, in which the width of the link between two nodes is shown proportionally to the flow quantity. Use it to show how a quantity flows from sources to targets, for example, how the sales of each product category split across regions.

Buckets

Sorting

The Sankey chart applies no default sorting. SankeyChart accepts a sortBy prop but doesn’t add it to the execution, so the prop has no effect.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Limits

• A Sankey chart can’t show negative values. If the data contains any, the chart shows an error and onError receives a NegativeValuesSdkError.
• A Sankey chart renders up to 10,000 nodes and 10,000 links. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { SankeyChart } from "@gooddata/sdk-ui-charts";

<SankeyChart
    measure={<measure>}
    attributeFrom={<attribute>}
    attributeTo={<attribute>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { SankeyChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };
const config = {
    separators: { decimal: ".", thousand: "," },
    legend: { position: "auto", enabled: true },
    dataLabels: { visible: "auto" },
};

<div style={style}>
    <SankeyChart
        measure={Md.TotalSales}
        attributeFrom={Md.MenuCategory}
        attributeTo={Md.LocationState}
        config={config}
    />
</div>

Props