What is a Sankey diagram?

Blog Posts Data Journalism Data Science Highcharts Tutorials0 comments

Featured image


In this tutorial, I will explain in a simplistic manner what a Sankey diagram is and how to create one with Highcharts.

Sankey diagrams are convenient to illustrate data flow between multiple elements at different levels (demo: The Flow of the Estimated US Energy Consumption in 2017) and data composition of one or many elements (demo: Composition of Apple Inc. Total Assets 9/29/2020). Sankey diagrams visualize nodes and links. The links’ width between nodes is proportional to the flow quantity size.

The Flow of the Estimated US Energy Consumption in 2017

Composition of Apple Inc. Total Assets 9/29/2020


How to create a Sakey diagram with Highcharts?

As mentioned, it is simple to create a Sankey diagram with Highcharts; you begin with writing down the nodes structure using three parameters under data. For example, if node A provides to node B a flow of data with a quantity of 10 units, our data structure will be ["node A", "node B", 10], that is it, it is that straightforward.

By default, the Highcharts engine takes care of nodes’ 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.
Additionally, Highcharts provides two convenient options to rearrange the layout to customize your needs.
To set a node on any column, use the option column, and to adjust a node on the y axis use the offset option.

nodes: [
          id: "Electricity & Heat",
          color: "#ffa500",
          offset: -110
          id: "Residential",
          color: "#74ffe7",
          column: 2,
          offset: 50

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: Apple Inc. (AAPL) Balance Sheet 9/29/2020):

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.

Consent for marketing cookies needs to be given to post comments
Do NOT follow this link or you will be banned from the site!