Sort sankey chart nodes from low to high

Question

const dataSeries = [{
        "name": "Containerburg"
      },
      {
        "name": "HTCont1"
      },
      {
        "name": "Kranstrom"
      },
      {
        "name": "Wago3"
      },
      {
        "name": "Wago5"
      },
      {
        "name": "Wago2"
      },
      {
        "name": "Heinrich Campus "
      },
      {
        "name": "SubCont1"
      },
      {
        "name": "Heinrich Campus"
      }
    ];

    const seriesLinks = [{
        "source": "Containerburg",
        "target": "HTCont1",
        "value": 20.874000000000024
      },
      {
        "source": "Kranstrom",
        "target": "Wago3",
        "value": 44.253999999999905
      },
      {
        "source": "Containerburg",
        "target": "Wago5",
        "value": 126.2489999999998
      },
      {
        "source": "Kranstrom",
        "target": "Wago2",
        "value": 151.63200000000006
      },
      {
        "source": "Heinrich Campus ",
        "target": "Kranstrom",
        "value": 195.88599999999997
      },
      {
        "source": "Containerburg",
        "target": "SubCont1",
        "value": 745.3199999999997
      },
      {
        "source": "Heinrich Campus",
        "target": "Containerburg",
        "value": 892.4429999999995
      }
    ];

option = {
  series: [
    {
      type: "sankey",
      data: dataSeries,
      links: seriesLinks,
    },
  ],
};

Apache ECharts automatically orders it from high value to low (SubCont1 < HTCont1) but I want to reverse the ordering so that HTCont1 is on top and SubCont1 is on the bottom.

This is a working example that can be pasted to https://echarts.apache.org/examples/en/editor.html or can be viewed here http://jsfiddle.net/y7emL1np/

score 4 · Accepted Answer · answered Nov 26 '20 at 14:37

4

You can use the layoutIterations parameter to achieve this. Setting it to 0 (zero) disables all layout adjustments based on weight/value. http://jsfiddle.net/yj5u9htb/

    var option = {
      series: [{
        type: "sankey",
        data: dataSeries,
        links: seriesLinks,
        layoutIterations: 0
      }]
    };

    myChart.setOption(option);

answered Nov 26 '20 at 14:37

Sergiu Paraschiv

9,929
5
36
47

Thanks for you answer! I tried that already but this messes up completely the chart! :-/ You can see it here (added `layoutIterations`): http://jsfiddle.net/y7emL1np/ – mrks Nov 26 '20 at 14:41
@mrks Well that's what `layoutIterations` does, it tries to re-order the groups so that there's less overlap. Setting this to anything other than 0 means sorting doesn't make sense anymore. But then the order in which your groups appear in the `data` list is the one used to draw them. Changing that "fixes" your "messed up" layout: http://jsfiddle.net/bjzmwpt4/ – Sergiu Paraschiv Nov 26 '20 at 15:09

score 0 · Answer 2 · answered Nov 26 '20 at 14:58

0

series: [{
  // ...
  layoutIterations: 0,
  // ...
}]

You disabled layout optimization, now you need to change order by yourself :)

const seriesLinks = [{
  // ...
}].reverse() // <--- this

See a bit fixed example:

answered Nov 26 '20 at 14:58

Sergey Fedorov

3,696
2
17
21

Sort sankey chart nodes from low to high

2 Answers2