Create a Vertical Sankey chart with Highcharts

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)
This 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.

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’s see how we can build such a chart. Shall we 🙂

Library

To be able to create a vertical Sankey chart, be sure to add the following libraries:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

highcharts.js is the backbone, providing the fundamental framework for interactive chart creation. sankey.js allows you to use and configure a sankey chart and, of course, the vertical sankey chart.
I always recommend adding accessibility.js to add a layer of inclusivity, making the chart comprehensible for all users, including those with disabilities.

Configuration

The configuration part is very straightforward. I define the chart type in the chart object type: 'sankey', for this tutorial, I want to create a vertical Sankey, so I set the inverted to true.

  chart: {
    type: 'sankey',
    inverted: true,
    height: 1000
  },

Notice that I set the inactive object to false to ensure a smooth user interaction:

   plotOptions: {
       sankey: {
         states: {
           inactive: {
             enabled: false
           }
         },

Data structure

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’ values, and the Highcharts library generates the nodes dynamically. Each link has three parameters from, to and weight. The data structure for this demo looks like below:

nodes: [{
    id: 'Total annual U.S. energy consumption',
    color: 'rgba(76, 175, 254,0.8)'
  }, …],
  keys: ['from', 'to', 'weight'],
  data: [
    [
      'Total annual U.S. energy consumption',
      'All non-water related energy consumption',
      51564
    ], …
  ]

One more thing to add, the secret ingredient to create the smooth visualization effect is the linkColorMode. And to use it is very simple:

public linkColorMode: ('from'|'gradient'|'to')

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 🙂

Feel free to create and explore the Highcharts vertical Sankey chart using Sankey Highcharts API.