Images in Sankey nodes
This demo shows how we can add images to Sankey diagram’s nodes.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create series// https://www.amcharts.com/docs/v5/charts/flow-charts/var series = root.container.children.push( am5flow.Sankey.new(root, { sourceIdField: "from", targetIdField: "to", valueField: "value", paddingRight: 50 }));
series.nodes.get("colors").set("step", 2);
series.nodes.labels.template.set("paddingLeft", 20);
series.nodes.nodes.template.setup = function (node) { var picture = node.children.push( am5.Picture.new(root, { width: 20, height: 20, y: am5.p50, x: am5.p50, centerY: am5.p50, centerX: am5.p50 }) );
node.events.on("dataitemchanged", function (e) { var node = e.target; var dataItem = node.dataItem; if (dataItem) { picture.set("src", dataItem.dataContext.src); } });};
series.nodes.data.setAll([ { id: "A", src: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg" }, { id: "B", src: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg" }, { id: "C", src: "https://www.amcharts.com/wp-content/uploads/flags/india.svg" }, { id: "D", src: "https://www.amcharts.com/wp-content/uploads/flags/china.svg" }, { id: "E", src: "https://www.amcharts.com/wp-content/uploads/flags/australia.svg" }, { id: "G", src: "https://www.amcharts.com/wp-content/uploads/flags/lithuania.svg" }, { id: "H", src: "https://www.amcharts.com/wp-content/uploads/flags/latvia.svg" }, { id: "I", src: "https://www.amcharts.com/wp-content/uploads/flags/estonia.svg" }, { id: "J", src: "https://www.amcharts.com/wp-content/uploads/flags/italy.svg" }]);
// Set data// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_dataseries.data.setAll([ { 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 }]);
// Make stuff animate on loadseries.appear(1000, 100);<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 95vh;}sankey-diagram-3