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.

Sankey Chart Component


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



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

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

<div style={style}>


measuretrueIMeasureThe measure definition
attributeFromfalseIAttributeThe attribute definition
attributeTofalseIAttributeThe attribute definition
filtersfalseIFilter[]An array of filter definitions
configfalseIChartConfigThe chart configuration object
backendfalseIAnalyticalBackendThe object with the configuration related to communication with the backend and access to analytical workspaces
workspacefalsestringThe workspace ID
localefalsestringThe localization of the chart. Defaults to en-US. For other languages, see the full list of available localizations.
drillableItemsfalseIDrillableItem[]An array of points and attribute values to be drillable
ErrorComponentfalseComponentA component to be rendered if this component is in error state
LoadingComponentfalseComponentA component to be rendered if this component is in loading state
onErrorfalseFunctionA callback when the component updates its error state
onExportReadyfalseFunctionA callback when the component is ready for exporting its data
onLoadingChangedfalseFunctionA callback when the component updates its loading state
onDrillfalseFunctionA callback when a drill is triggered on the component

The following example shows the supported config structure with sample values. For the descriptions of the individual options, see ChartConfig.

    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.attributeHeaderItem && (headerItem.attributeHeaderItem.uri === "Coffee")
        color: {
            type: "guid",
            value: "02"
    legend: {
        enabled: true,
        position: "top",
    dataLabels: {
        visible: "auto"
    separators: {
        thousand: ",",
        decimal: "."