20% Off All Froala Plans

Days

Hours

Minutes

Seconds

x

Sankey Chart

Sankey Diagram is a type of flow diagram that depicts the flow of resources (material, energy, cost, etc.) from one node to another. The start and endpoints of each flow are called nodes and the flow paths between them are called links. There can only be one link between a pair of nodes. The value of the flow between each pair of nodes is encoded by the width of the link. The coloration of the links help establish visual mapping with their respective nodes.

Caption

The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it

Data Plot

Data plot refers to the columns of the sankey chart.

Node

The start and endpoints of each flow in a Sankey Diagram are called nodes.

Link

The flow paths between any two nodes in a Sankey Diagram are called links.

Export menu that appears on top-right of the chart, it offers different options to export a chart.

You can enable or disable chart export using attribute exportEnabled. Refer to Exporting Charts to learn more.

Create a Sankey Chart

For a detailed list of attributes, refer to the Sankey Chart attributes page.

CHART

JSON

{
  "chart": {
    "caption": "Bilateral Trade Volume, 2013",
    "subcaption": "A Horizontal Sankey with options to configure the flow representation",
    "theme": "froala",
    "orientation": "horizontal",
    "linkalpha": 30,
    "linkhoveralpha": 60,
    "nodelabelposition": "start"
  },
  "nodes": [
    {
      "label": "Netherlands"
    },
    {
      "label": "Canada"
    },
    {
      "label": "Belgium"
    },
    {
      "label": "Italy"
    },
    {
      "label": "Mexico"
    },
    {
      "label": "Russia"
    },
    {
      "label": "Spain"
    },
    {
      "label": "South Korea"
    },
    {
      "label": "Germany"
    },
    {
      "label": "China"
    },
    {
      "label": "European Union"
    },
    {
      "label": "Japan"
    },
    {
      "label": "United Kingdom"
    },
    {
      "label": "United States"
    },
    {
      "label": "France"
    },
    {
      "label": "Hong Kong"
    },
    {
      "label": "Switzerland"
    },
    {
      "label": "Austria"
    },
    {
      "label": "Sweden"
    }
  ],
  "links": [
    {
      "from": "Netherlands",
      "to": "European Union",
      "value": 798744
    },
    {
      "from": "Germany",
      "to": "European Union",
      "value": 1468990
    },
    {
      "from": "European Union",
      "to": "France",
      "value": 745931
    },
    {
      "from": "European Union",
      "to": "United States",
      "value": 660541
    },
    {
      "from": "Canada",
      "to": "United States",
      "value": 594546
    },
    {
      "from": "Belgium",
      "to": "European Union",
      "value": 628796
    },
    {
      "from": "China",
      "to": "Hong Kong",
      "value": 400571
    },
    {
      "from": "China",
      "to": "United States",
      "value": 526454
    },
    {
      "from": "European Union",
      "to": "United Kingdom",
      "value": 520318
    },
    {
      "from": "China",
      "to": "European Union",
      "value": 560536
    },
    {
      "from": "Italy",
      "to": "European Union",
      "value": 539556
    },
    {
      "from": "Mexico",
      "to": "United States",
      "value": 492715
    },
    {
      "from": "Russia",
      "to": "European Union",
      "value": 385778
    },
    {
      "from": "Spain",
      "to": "European Union",
      "value": 365191
    },
    {
      "from": "China",
      "to": "Japan",
      "value": 312062
    },
    {
      "from": "European Union",
      "to": "Switzerland",
      "value": 328609
    },
    {
      "from": "South Korea",
      "to": "China",
      "value": 229073
    },
    {
      "from": "European Union",
      "to": "Austria",
      "value": 244913
    },
    {
      "from": "Japan",
      "to": "United States",
      "value": 206091
    },
    {
      "from": "European Union",
      "to": "Sweden",
      "value": 204849
    },
    {
      "from": "Germany",
      "to": "United States",
      "value": 184287
    }
  ]
}

HTML

<html>
<head>
      <title>My first chart using FroalaCharts</title>
     
  <script src=https://unpkg.com/[email protected]/froalacharts.js></script>
  <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script> 

  <script type="text/javascript">   
       var data = {  
        chart: {
    caption: "Bilateral Trade Volume, 2013",
    subcaption:
      "A Horizontal Sankey with options to configure the flow representation",
    theme: "froala",
    orientation: "horizontal",
    linkalpha: 30,
    linkhoveralpha: 60,
    nodelabelposition: "start"
  },
  nodes: [
    {
      label: "Netherlands"
    },
    {
      label: "Canada"
    },
    {
      label: "Belgium"
    },
    {
      label: "Italy"
    },
    {
      label: "Mexico"
    },
    {
      label: "Russia"
    },
    {
      label: "Spain"
    },
    {
      label: "South Korea"
    },
    {
      label: "Germany"
    },
    {
      label: "China"
    },
    {
      label: "European Union"
    },
    {
      label: "Japan"
    },
    {
      label: "United Kingdom"
    },
    {
      label: "United States"
    },
    {
      label: "France"
    },
    {
      label: "Hong Kong"
    },
    {
      label: "Switzerland"
    },
    {
      label: "Austria"
    },
    {
      label: "Sweden"
    }
  ],
  links: [
    {
      from: "Netherlands",
      to: "European Union",
      value: 798744
    },
    {
      from: "Germany",
      to: "European Union",
      value: 1468990
    },
    {
      from: "European Union",
      to: "France",
      value: 745931
    },
    {
      from: "European Union",
      to: "United States",
      value: 660541
    },
    {
      from: "Canada",
      to: "United States",
      value: 594546
    },
    {
      from: "Belgium",
      to: "European Union",
      value: 628796
    },
    {
      from: "China",
      to: "Hong Kong",
      value: 400571
    },
    {
      from: "China",
      to: "United States",
      value: 526454
    },
    {
      from: "European Union",
      to: "United Kingdom",
      value: 520318
    },
    {
      from: "China",
      to: "European Union",
      value: 560536
    },
    {
      from: "Italy",
      to: "European Union",
      value: 539556
    },
    {
      from: "Mexico",
      to: "United States",
      value: 492715
    },
    {
      from: "Russia",
      to: "European Union",
      value: 385778
    },
    {
      from: "Spain",
      to: "European Union",
      value: 365191
    },
    {
      from: "China",
      to: "Japan",
      value: 312062
    },
    {
      from: "European Union",
      to: "Switzerland",
      value: 328609
    },
    {
      from: "South Korea",
      to: "China",
      value: 229073
    },
    {
      from: "European Union",
      to: "Austria",
      value: 244913
    },
    {
      from: "Japan",
      to: "United States",
      value: 206091
    },
    {
      from: "European Union",
      to: "Sweden",
      value: 204849
    },
    {
      from: "Germany",
      to: "United States",
      value: 184287
    }
  ]
};
       

FroalaCharts.ready(function () {
            froalacharts = new FroalaCharts({
                id: "chart_1",
                type: 'sankey',
                renderAt: 'ft',
                width: '800',
                height: '500',
                dataSource: data
            });
            froalacharts.render();
        });
    </script>
    
</head>


<div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>

<body>
    <div id="ft">FroalaCharts will render here</div>
</body>

</html>