* ---------------------------------------
* This demo was created using amCharts 4.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
{ from: "D", width: 30, offset: -30 },
{ from: "H", width: 50, offset: 15 },
{ from: "C", width: 40, offset: 40 },
{ from: "A", to: "D", value: 10 },
{ from: "B", to: "D", value: 8 },
{ from: "B", to: "E", value: 4 },
{ from: "C", to: "E", value: 3 },
{ from: "D", to: "G", value: 5 },
{ from: "D", to: "I", value: 2 },
{ from: "D", to: "H", value: 3 },
{ from: "E", to: "H", value: 6 },
{ from: "G", to: "J", value: 5 },
{ from: "I", to: "J", value: 1 },
{ from: "H", to: "J", value: 9 }
let hoverState = chart.links.template.states.create("hover");
hoverState.properties.fillOpacity = 0.6;
chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";
// for right-most label to fit
var nodeTemplate = chart.nodes.template;
nodeTemplate.propertyFields.width = "width";
nodeTemplate.adapter.add("dx", function (dx, target) {
return target.dataItem ? target.dataItem.dataContext.offset || dx : dx;