Froala Editor v4.2.0 is Here LEARN MORE
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
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 attributeexportEnabled. 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
FroalaCharts will render here
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>