Vertically re-order nodes in Highcharts sankey-diagram

Question

I currently have the following Sankey Diagram:

I would like to ensure that the nodes that start with C0 are always on top. The nodes with c1 are always on the bottom, and the nodes with C2 are in between (when they are present). Is there any way to force these vertical positions in each column? Similar question here (with no anwers).

JSFiddle

Code:

Highcharts.chart('container', {

    title: {
        text: 'Title'
    },

    series: [{
            colors: ["lightgrey"],
        keys: ['color', 'from', 'to', 'weight'],
        data: [{'color': 'rgb(255, 207, 207)', 'from': 'C0_1', 'to': 'C0_2', 'weight': 638},
 {'color': 'rgb(255, 130, 130)', 'from': 'C0_1', 'to': 'C1_2', 'weight': 164},
 {'color': 'rgb(255, 207, 207)', 'from': 'C1_1', 'to': 'C0_2', 'weight': 123},
 {'color': 'rgb(255, 130, 130)', 'from': 'C1_1', 'to': 'C1_2', 'weight': 1313},
 {'color': 'rgb(255, 212, 212)', 'from': 'C0_2', 'to': 'C0_3', 'weight': 555},
 {'color': 'rgb(255, 127, 127)', 'from': 'C0_2', 'to': 'C1_3', 'weight': 105},
 {'color': 'rgb(255, 212, 212)', 'from': 'C1_2', 'to': 'C0_3', 'weight': 111},
 {'color': 'rgb(255, 127, 127)', 'from': 'C1_2', 'to': 'C1_3', 'weight': 1320},
 {'color': 'rgb(255, 217, 217)', 'from': 'C0_3', 'to': 'C0_4', 'weight': 495},
 {'color': 'rgb(255, 119, 119)', 'from': 'C0_3', 'to': 'C1_4', 'weight': 80},
 {'color': 'rgb(255, 217, 217)', 'from': 'C1_3', 'to': 'C0_4', 'weight': 157},
 {'color': 'rgb(255, 119, 119)', 'from': 'C1_3', 'to': 'C1_4', 'weight': 1223},
 {'color': 'rgb(255, 219, 219)', 'from': 'C0_4', 'to': 'C0_5', 'weight': 374},
 {'color': 'rgb(255, 66, 66)', 'from': 'C0_4', 'to': 'C1_5', 'weight': 32},
 {'color': 'rgb(255, 186, 186)', 'from': 'C0_4', 'to': 'C2_5', 'weight': 157},
 {'color': 'rgb(255, 219, 219)', 'from': 'C1_4', 'to': 'C0_5', 'weight': 91},
 {'color': 'rgb(255, 66, 66)', 'from': 'C1_4', 'to': 'C1_5', 'weight': 623},
 {'color': 'rgb(255, 186, 186)', 'from': 'C1_4', 'to': 'C2_5', 'weight': 545},
 {'color': 'rgb(255, 225, 225)', 'from': 'C0_5', 'to': 'C0_6', 'weight': 299},
 {'color': 'rgb(255, 63, 63)', 'from': 'C0_5', 'to': 'C1_6', 'weight': 27},
 {'color': 'rgb(255, 170, 170)', 'from': 'C0_5', 'to': 'C2_6', 'weight': 59},
 {'color': 'rgb(255, 225, 225)', 'from': 'C1_5', 'to': 'C0_6', 'weight': 13},
 {'color': 'rgb(255, 63, 63)', 'from': 'C1_5', 'to': 'C1_6', 'weight': 425},
 {'color': 'rgb(255, 170, 170)', 'from': 'C1_5', 'to': 'C2_6', 'weight': 197},
 {'color': 'rgb(255, 225, 225)', 'from': 'C2_5', 'to': 'C0_6', 'weight': 136},
 {'color': 'rgb(255, 63, 63)', 'from': 'C2_5', 'to': 'C1_6', 'weight': 135},
 {'color': 'rgb(255, 170, 170)', 'from': 'C2_5', 'to': 'C2_6', 'weight': 409},
 {'color': 'rgb(255, 219, 219)', 'from': 'C0_6', 'to': 'C0_7', 'weight': 273},
 {'color': 'rgb(255, 62, 62)', 'from': 'C0_6', 'to': 'C1_7', 'weight': 29},
 {'color': 'rgb(255, 199, 199)', 'from': 'C0_6', 'to': 'C2_7', 'weight': 62},
 {'color': 'rgb(255, 219, 219)', 'from': 'C1_6', 'to': 'C0_7', 'weight': 12},
 {'color': 'rgb(255, 62, 62)', 'from': 'C1_6', 'to': 'C1_7', 'weight': 440},
 {'color': 'rgb(255, 199, 199)', 'from': 'C1_6', 'to': 'C2_7', 'weight': 116},
 {'color': 'rgb(255, 219, 219)', 'from': 'C2_6', 'to': 'C0_7', 'weight': 49},
 {'color': 'rgb(255, 62, 62)', 'from': 'C2_6', 'to': 'C1_7', 'weight': 211},
 {'color': 'rgb(255, 199, 199)', 'from': 'C2_6', 'to': 'C2_7', 'weight': 382},
 {'color': 'rgb(255, 208, 208)', 'from': 'C0_7', 'to': 'C0_8', 'weight': 239},
 {'color': 'rgb(255, 40, 40)', 'from': 'C0_7', 'to': 'C1_8', 'weight': 9},
 {'color': 'rgb(255, 192, 192)', 'from': 'C0_7', 'to': 'C2_8', 'weight': 31},
 {'color': 'rgb(255, 208, 208)', 'from': 'C1_7', 'to': 'C0_8', 'weight': 39},
 {'color': 'rgb(255, 40, 40)', 'from': 'C1_7', 'to': 'C1_8', 'weight': 403},
 {'color': 'rgb(255, 192, 192)', 'from': 'C1_7', 'to': 'C2_8', 'weight': 210},
 {'color': 'rgb(255, 208, 208)', 'from': 'C2_7', 'to': 'C0_8', 'weight': 77},
 {'color': 'rgb(255, 40, 40)', 'from': 'C2_7', 'to': 'C1_8', 'weight': 106},
 {'color': 'rgb(255, 192, 192)', 'from': 'C2_7', 'to': 'C2_8', 'weight': 344},
 {'color': 'rgb(255, 227, 227)', 'from': 'C0_8', 'to': 'C0_9', 'weight': 222},
 {'color': 'rgb(255, 49, 49)', 'from': 'C0_8', 'to': 'C1_9', 'weight': 24},
 {'color': 'rgb(255, 191, 191)', 'from': 'C0_8', 'to': 'C2_9', 'weight': 47},
 {'color': 'rgb(255, 227, 227)', 'from': 'C1_8', 'to': 'C0_9', 'weight': 6},
 {'color': 'rgb(255, 49, 49)', 'from': 'C1_8', 'to': 'C1_9', 'weight': 367},
 {'color': 'rgb(255, 191, 191)', 'from': 'C1_8', 'to': 'C2_9', 'weight': 110},
 {'color': 'rgb(255, 227, 227)', 'from': 'C2_8', 'to': 'C0_9', 'weight': 49},
 {'color': 'rgb(255, 49, 49)', 'from': 'C2_8', 'to': 'C1_9', 'weight': 147},
 {'color': 'rgb(255, 191, 191)', 'from': 'C2_8', 'to': 'C2_9', 'weight': 369},
 {'color': 'rgb(255, 188, 188)', 'from': 'C0_9', 'to': 'C2_10', 'weight': 24},
 {'color': 'rgb(255, 26, 26)', 'from': 'C0_9', 'to': 'C1_10', 'weight': 9},
 {'color': 'rgb(255, 204, 204)', 'from': 'C0_9', 'to': 'C0_10', 'weight': 192},
 {'color': 'rgb(255, 188, 188)', 'from': 'C1_9', 'to': 'C2_10', 'weight': 156},
 {'color': 'rgb(255, 26, 26)', 'from': 'C1_9', 'to': 'C1_10', 'weight': 332},
 {'color': 'rgb(255, 204, 204)', 'from': 'C1_9', 'to': 'C0_10', 'weight': 40},
 {'color': 'rgb(255, 188, 188)', 'from': 'C2_9', 'to': 'C2_10', 'weight': 340},
 {'color': 'rgb(255, 26, 26)', 'from': 'C2_9', 'to': 'C1_10', 'weight': 90},
 {'color': 'rgb(255, 204, 204)', 'from': 'C2_9', 'to': 'C0_10', 'weight': 67}],
        type: 'sankey',
        name: 'Name here',
        nodeWidth:3
    }]

});

Have you tried to define the `nodes.column` position to achieve it? https://api.highcharts.com/highcharts/series.sankey.nodes.column — Sebastian Wędzel, Jul 12 '21 at 10:03
@sandertjuh did you get any help with this, I am having the same trouble — Sai Babu B, Dec 08 '21 at 10:29
@SaiBabuB could you reproduce your issue on some online editor? — Sebastian Wędzel, Dec 08 '21 at 11:33

score 0 · Answer 1 · answered Jan 27 '22 at 17:43

My colleague has suggested a solution and it worked, so answering the question myself. It's very simple, straight forward and can be done in below 3 steps.

Find a way to Divide all the data column wise like below

{ "column1": [ { "color": "rgb(255, 207, 207)", "from": "C0_1", "to": "C0_2", "weight": 638 }, { "color": "rgb(255, 130, 130)", "from": "C0_1", "to": "C1_2", "weight": 164 } ], "column2": [ { "color": "rgb(255, 207, 207)", "from": "C1_1", "to": "C0_2", "weight": 123 }, { "color": "rgb(255, 130, 130)", "from": "C1_1", "to": "C1_2", "weight": 1313 } ] } and so on
Now sort them based on their names which is based on from attribute on the each data point in each column).
Take the first node in first column and create points from that node to every other column's every node with 0 weight, output will be like below.

"column1": [ { "color": "rgb(255, 207, 207)", "from": "C0_1", "to": "C0_2", "weight": 0 }, { "color": "rgb(255, 130, 130)", "from": "C0_1", "to": "C1_2", "weight": 0 } ] and so on.

Now add these zero weight data points in a new array, and then append all your sorted columns data points from the first step to this array, and you Sankey diagram is sorted on all the columns. Hope you got What I am tried to explain here.

score 0 · Answer 2 · answered May 20 '22 at 12:55

The answer above is bit unclear. All what is need to do - is to sort items in order that required in columns and then - to add before a first item of each column a zero weight (not displayed) items that are link pair of a first item of each column and all items of the next column.

For example this unsorted data:

data: [
 {'color': 'rgb(255, 207, 207)', 'from': 'V', 'to': 'D', 'weight': 638},
 {'color': 'rgb(255, 207, 207)', 'from': 'G', 'to': 'C', 'weight': 123},
 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'D', 'weight': 164},
 
 {'color': 'rgb(255, 130, 130)', 'from': 'D', 'to': 'K', 'weight': 1313},
 {'color': 'rgb(255, 127, 127)', 'from': 'C', 'to': 'A', 'weight': 105} 
]

can be sorted and appended with items with zero weight sorted by required order for this column by "to" key like this to get an alphabetical order:

data: [
 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'C', 'weight': 0},
 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'D', 'weight': 0},

 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'D', 'weight': 164},
 {'color': 'rgb(255, 207, 207)', 'from': 'G', 'to': 'C', 'weight': 123},
 {'color': 'rgb(255, 207, 207)', 'from': 'V', 'to': 'D', 'weight': 638},

 {'color': 'rgb(255, 127, 127)', 'from': 'C', 'to': 'A', 'weight': 0},
 {'color': 'rgb(255, 130, 130)', 'from': 'C', 'to': 'K', 'weight': 0},

 {'color': 'rgb(255, 127, 127)', 'from': 'C', 'to': 'A', 'weight': 105},
 {'color': 'rgb(255, 130, 130)', 'from': 'D', 'to': 'K', 'weight': 1313}
]

Vertically re-order nodes in Highcharts sankey-diagram

2 Answers2