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.
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.