{"id":24375,"date":"2023-10-31T08:42:49","date_gmt":"2023-10-31T08:42:49","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24375"},"modified":"2026-01-13T11:38:01","modified_gmt":"2026-01-13T11:38:01","slug":"vertical-sankey-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/vertical-sankey-highcharts\/","title":{"rendered":"Create a Vertical Sankey chart with Highcharts"},"content":{"rendered":"<p>In this tutorial, I will show you how to create a vertical Sankey chart with Highcharts to visualize the energy consumed for water use in the United States in 2010 (see below)<br \/>\nThis visualization showcases the power of data representation and highlights the interconnectivity of various energy consumption stages. Understanding such complex relationships is critical for informed decision-making in our energy-hungry world.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A vertical sankey diagram to visualize the energy consumed for water use in the USA\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/vertical-sankey\" width=\"100%\" height=\"1200px\"><\/iframe><\/p>\n<p>A Sankey chart is an effective chart to visualize complex information, such as the flow of energy, resources, or financial data, thanks to its readability, space efficiency, and attractive aesthetics and design. So, let\u2019s see how we can build such a chart. Shall we \ud83d\ude42<\/p>\n<h2>Library<\/h2>\n<p>To be able to create a vertical Sankey chart, be sure to add the following libraries:<\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/sankey.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/exporting.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/export-data.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/accessibility.js\"&gt;&lt;\/script&gt;<\/pre>\n<p><code>highcharts.js<\/code> is the backbone, providing the fundamental framework for interactive chart creation. <code>sankey.js<\/code> allows you to use and configure a sankey chart and, of course, the vertical sankey chart.<br \/>\nI always recommend adding <code>accessibility.js<\/code>  to add a layer of inclusivity, making the chart comprehensible for all users, including those with disabilities.<\/p>\n<h2>Configuration<\/h2>\n<p>The configuration part is very straightforward. I define the <code>chart<\/code> type in the chart object <code>type: 'sankey'<\/code>, for this tutorial, I want to create a vertical Sankey, so I set the <code>inverted<\/code> to <code>true<\/code>.<\/p>\n<pre>  chart: {\r\n    type: 'sankey',\r\n    inverted: true,\r\n    height: 1000\r\n  },<\/pre>\n<p>Notice that I set the <code>inactive<\/code> object to <code>false<\/code> to ensure a smooth user interaction:<\/p>\n<pre>   plotOptions: {\r\n       sankey: {\r\n         states: {\r\n           inactive: {\r\n             enabled: false\r\n           }\r\n         },<\/pre>\n<h2>Data structure<\/h2>\n<p>The vertical Sankey data structure is the same as the Sankey chart; it consists of two data types. The nodes are the boxes that the items or other measures flow between. The links are the bands visualizing the flow itself. All you have to do is define the links&#8217; values, and the Highcharts library generates the nodes dynamically. Each link has three parameters <code>from<\/code>, <code>to<\/code> and <code>weight<\/code>. The data structure for this demo looks like below:<\/p>\n<pre>nodes: [{\r\n    id: 'Total annual U.S. energy consumption',\r\n    color: 'rgba(76, 175, 254,0.8)'\r\n  }, \u2026],\r\n  keys: ['from', 'to', 'weight'],\r\n  data: [\r\n    [\r\n      'Total annual U.S. energy consumption',\r\n      'All non-water related energy consumption',\r\n      51564\r\n    ], \u2026\r\n  ]<\/pre>\n<p>One more thing to add, the secret ingredient to create the smooth visualization effect is the <code>linkColorMode<\/code>. And to use it is very simple:<\/p>\n<pre>public linkColorMode: ('from'|'gradient'|'to')<\/pre>\n<p>Now, you are all set, thanks to Highcharts, which does all the heavy lifting behind the scenes to create a smooth and visually appealing Sankey chart \ud83d\ude42 <\/p>\n<p>Feel free to create and explore the Highcharts vertical Sankey chart using <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.sankey\" target=\"_blank\" rel=\"noopener\">Sankey Highcharts API<\/a>.<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/line-chart-vs-bar-chart-choosing-the-right-one-for-your-objectives-and-data\/\">Line chart vs bar chart: choosing the right one for your objectives and data<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/pareto-chart-what-is-it-and-what-does-it-suggest\/\">Pareto chart: what is it and what does it suggest<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/big-data-visualization-using-highcharts\/\">Big data visualization using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/polygon-chart-using-highcharts\/\">Polygon chart using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/heat-map-examples-using-highcharts\/\">Heat map examples using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/choropleth-map-examples-using-highcharts\/\">Choropleth map examples using Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step tutorial to create Highcharts vertical Sankey.<\/p>\n","protected":false},"author":32,"featured_media":24379,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,1031],"coauthors":[699],"class_list":["post-24375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24375"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24375\/revisions"}],"predecessor-version":[{"id":26047,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24375\/revisions\/26047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24379"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24375"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}