Sankey graph deformation on div resize when using data with a -> a pattern

[romanbitca]

Expected behaviour

Smooth graph redraw.

Actual behaviour

A part of graph is deformed and alighted to right.
GIF demo included.

Function used to redraw

resize () { const { sankey } = this.$refs if (sankey) { clearTimeout(this.timeoutID) this.timeoutID = setTimeout(() => { sankey.chart.setSize(null) sankey.chart.redraw() }, 200) } }

Product version

"highcharts": "^7.1.2",
"highcharts-vue": "^1.3.5",

Affected browser(s)

All browsers.
Gif demo is recorded on Chrome.

[sebastianbochan]

Hi @romanbitca,
Thank you for reporting. Could you share a live demo of your chart? It will allow us to reproduce and debug the problem.

[romanbitca]

Here it is:
https://codesandbox.io/s/eloquent-chaplygin-y3hqz?file=/src/App.vue

Try slowly to resize the sandbox window.

[pawelfus]

Thank you for the demo @romanbitca

Simplified demo:
https://jsfiddle.net/BlackLabel/19d7jrbo/

This is caused by self-referencing node:

      [
        31252,
        31252,
        199204
      ],

When removed - works fine.

[romanbitca]

We know that self-referencing node produces this bug. And I need to display this ‘loop’.
Any solution?

[pawelfus]

I think there is a workaround you can try to implement, while this bug is open: set fixed column for a specific node:

nodes: [{
  id: 31252,
  column: ...
}]

I said it's not an easy task, because it will be tricky to calculate the column. Demo: https://jsfiddle.net/BlackLabel/19d7jrbo/3/

Just realized that issue was wrongly tagged - fixed.

Simplified demo: https://jsfiddle.net/BlackLabel/tdymnhvj/1/
Simplified demo with workaround: https://jsfiddle.net/BlackLabel/tdymnhvj/2/

[romanbitca]

Ok, thank you.
Waiting for bug fix.