I need to build a sankey chart from highcharts.js to look like the one in the example image, basically what I try to do is change the shape and position of some flows and nodes in the chart. Help will be apreciated since I cant find any solucion in the internet.
Highcharts.chart('container', {...});
Here is an ugly hack that can do what you need. I had no time to properly finish it, but it works.
What you can do now, is to set the node incoming and outgoing options and play with vertical-horizontal-offset.
nodes=[
{id:'import' ,column:1, offsetVertical:-100 ,offsetHorizontal:-20},
{id:'production',column:0, offsetVertical:22 ,offsetHorizontal:0},
{id:'total' ,column:2, offsetVertical:0 ,offsetHorizontal:0},
{id:'loss' ,column:3, offsetVertical:50 ,offsetHorizontal:0},
{id:'final' ,column:5, offsetVertical:-10 ,offsetHorizontal:0},
{id:'export' ,column:4, offsetVertical:50 ,offsetHorizontal:0},
]
Highcharts.chart('container', {
chart: {
height: (9/16 * 90 )+ "%"
},
series: [{
keys: ['from', 'to', 'weight'],
data: [{
from: 'import',
to: 'total',
weight: 80,
incoming: true
}, {
from: 'production',
to: 'total',
weight: 20,
}, {
from: 'total',
to: 'final',
weight: 56,
}, {
from: 'total',
to: 'export',
weight: 17,
outgoing: true
}, {
from: 'total',
to: 'loss',
weight: 27,
outgoing: true
}],
dataLabels: {
nodeFormat: '{point.name}: {point.sum}%',
padding: 20,
style: {
fontSize: '0.8em'
}
},
nodes: nodes,
type: 'sankey',
name: 'Energy',
linkOpacity: 1,
}]
});Here is the fiddle link
I changed sankey.js directly and also used the proto translate option. Main changes:
Relating to sankey this series have some limitations, to adjust you can use nodeWidth, nodePadding and minLinkWidth.
The nodes are generated so that the total weight going in or out of a node is visualized. Nodes are instances of Point and are available from the series.nodes array. The width of the nodes can be set with the nodeWidth option, and padding between them with nodePadding.
https://www.highcharts.com/docs/chart-and-series-types/sankey-diagram#nodes