{"id":20400,"date":"2020-12-04T12:29:05","date_gmt":"2020-12-04T11:29:05","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20400"},"modified":"2026-01-13T11:16:52","modified_gmt":"2026-01-13T11:16:52","slug":"what-is-a-sankey-diagram","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/what-is-a-sankey-diagram\/","title":{"rendered":"What is a Sankey diagram?"},"content":{"rendered":"<p>In this tutorial, I will explain in a simplistic manner what a Sankey diagram is and how to create one with Highcharts.<\/p>\n<p><a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/sankey-diagram\" target=\"_blank\" rel=\"noopener noreferrer\">Sankey diagrams<\/a> are convenient to illustrate data flow between multiple elements at different levels (demo: <a href=\"https:\/\/codepen.io\/mushigh\/pen\/eYdJYRp\" target=\"_blank\" rel=\"noopener noreferrer\">The Flow of the Estimated US Energy Consumption in 2017<\/a>) and data composition of one or many elements (demo: <a href=\"https:\/\/codepen.io\/mushigh\/pen\/NWRxKMM\" target=\"_blank\" rel=\"noopener noreferrer\">Composition of Apple Inc. Total Assets 9\/29\/2020<\/a>). Sankey diagrams visualize nodes and links. The links\u2019 width between nodes is proportional to the flow quantity size.<br \/>\n&nbsp;<\/p>\n<p><b>The Flow of the Estimated US Energy Consumption in 2017<\/b><br \/>\n&nbsp;<\/p>\n<p class=\"demo-container\">\n<iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"Renewable Energy  Flow in North America\" src=\"https:\/\/codepen.io\/mushigh\/embed\/eYdJYRp?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A sankey displays the flow of the Estimated US Energy Consumption in 2017\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/eYdJYRp'>Renewable Energy  Flow in North America<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe>\n<\/p>\n<p>&nbsp;<\/p>\n<p><b>Composition of Apple Inc. Total Assets 9\/29\/2020<\/b><br \/>\n&nbsp;<\/p>\n<p class=\"demo-container\">\n<iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"Apple Inc. (AAPL)  Balance Sheet 9\/29\/2020\" src=\"https:\/\/codepen.io\/mushigh\/embed\/NWRxKMM?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A sankey displays the composition of Apple Inc. Total Assets 9\/29\/2020\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/NWRxKMM'>Apple Inc. (AAPL)  Balance Sheet 9\/29\/2020<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe>\n<\/p>\n<p>&nbsp;<\/p>\n<h2>How to create a Sakey diagram with Highcharts?<\/h2>\n<p>As mentioned, it is simple to create a Sankey diagram with Highcharts; you begin with writing down the nodes structure using three parameters under <code>data<\/code>. For example, if node A provides to node B a flow of data with a quantity of 10 units, our data structure will be <code>[\"node A\", \"node B\", 10]<\/code>,  that is it, it is that straightforward. <\/p>\n<p>By default, the Highcharts engine takes care of nodes\u2019 layout positioning. The engine gathers and places nodes with similar node providers in the same column starting from left to right, and alternatively from up to down following their appearance in the data structure.<br \/>\nAdditionally,  Highcharts provides two convenient options to rearrange the layout to customize your needs.<br \/>\nTo set a node on any column, use the option <code><a href=\"https:\/\/api.highcharts.com\/highcharts\/series.sankey.nodes.column\" target=\"_blank\" rel=\"noopener noreferrer\">column<\/a><\/code>, and to adjust a node on the y axis use the <code><a href=\"https:\/\/api.highcharts.com\/highcharts\/series.sankey.nodes.offset\" target=\"_blank\" rel=\"noopener noreferrer\">offset<\/a><\/code> option.<\/p>\n<pre>nodes: [\r\n        {\r\n          id: \"Electricity & Heat\",\r\n          color: \"#ffa500\",\r\n          offset: -110\r\n        },\r\n        {\r\n          id: \"Residential\",\r\n          color: \"#74ffe7\",\r\n          column: 2,\r\n          offset: 50\r\n        },\r\n...<\/pre>\n<p>A Sankey diagram can be accessible to suit visually impaired users. By using common sense to select the right colors and options to highlight nodes and links (demo: <a href=\"https:\/\/codepen.io\/mushigh\/pen\/XWjXrEL\" target=\"_blank\" rel=\"noopener noreferrer\">Apple Inc. (AAPL)  Balance Sheet 9\/29\/2020<\/a>):<\/p>\n<p class=\"demo-container\">\n<iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"Apple Inc. (AAPL)  Balance Sheet 9\/29\/2020\" src=\"https:\/\/codepen.io\/mushigh\/embed\/XWjXrEL?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A monochrome sankey displays the composition of Apple Inc. Total Assets 9\/29\/2020\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/XWjXrEL'>Apple Inc. (AAPL)  Balance Sheet 9\/29\/2020<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe>\n<\/p>\n<p>Now, you are ready to create your own Sankey diagram to visualize data flow or composition within various sectors such as energy, supply chain management, finance, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial to know what a Sankey diagram is and how a Sankey diagram works with Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":20413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1063,1094],"coauthors":[699],"class_list":["post-20400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-visualization","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20400","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=20400"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20400\/revisions"}],"predecessor-version":[{"id":29333,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20400\/revisions\/29333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20413"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20400"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}