Highcharts sankey diagram node rearrangement

Question

Highcharts.chart('container', {
    chart: {
      width: width,
      height: height
    },
    series: [{
      keys: ['from', 'to', 'weight'],
      data: [
        ['a', 'd', 1],
        ['b', 'c', 1],
        ['c', 'd', 1]
      ],
      type: 'sankey'
    }]
  });
});

When plotting two flows, a->d and b->c->d, Highcharts gives a strange node arrangement until the page is resized or the chart is reflowed:

Actual:

Expected:

Demo: https://jsfiddle.net/applewil/ezjfarh4/6/

Why do I need to resize or reflow to get the expected arrangement?

Answer 1

The problem is related to this reported issue on Highcharts GitHub: https://github.com/highcharts/highcharts/issues/8218

---

As a workaround, you can call reflow after a chart is loaded.

    chart: {
        events: {
            load: function() {
                this.reflow();
            }
        }
    }

---

Live demo: https://jsfiddle.net/BlackLabel/vdLy2a0z/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow