chart sankey does not support a->b->a pattern

[shshen]

Expected behaviour

sankey should be able to render a->b->a

Actual behaviour

sankey render incorrectly to b->a only.

Live demo with steps to reproduce

https://jsfiddle.net/zbnu6w36/

Product version

highcharts 6.1, but i think this does not work on all versions.

Affected browser(s)

all browser types.

[pawelfus]

Hi @shshen

Thank you for reporting. You are right, circular references are not supported right now.

[KacperMadej]

Internal note:
Going back doesn't look good, but works for other than starting nodes.
Looks bad - "to" is not start : https://jsfiddle.net/BlackLabel/zbnu6w36/5/
Doesn't work - "to" is start: https://jsfiddle.net/BlackLabel/zbnu6w36/6/

[TorsteinHonsi]

I did some work here, making the layout work in some cases. At least it is better now. But now we need to set chart margins to make room for the links, the next improvement would be to make the layout flow automatically.

• https://jsfiddle.net/highcharts/zbnu6w36/8/
• https://jsfiddle.net/highcharts/zbnu6w36/9/
• https://jsfiddle.net/highcharts/zbnu6w36/7/
• https://jsfiddle.net/highcharts/zbnu6w36/10/

[hurcy]

@TorsteinHonsi Could you see this case?
a->b, b->c, c->b doesn't work.
https://jsfiddle.net/m5yjrkv1/

[TorsteinHonsi]

Fixed, thanks for reporting! https://jsfiddle.net/highcharts/jfeo8tdy/2/

[niran-manandhar]

ERROR RangeError: Maximum call stack size exceeded in sankey.js
any updates?

[pawelfus]

Hi @niran-manandhar

Could you share an example? Note that new version (with fix) is not released, only available on our master branch:

<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/modules/sankey.js"></script>

[niran-manandhar]

with released
https://jsfiddle.net/niran_manandhar/q9b05amd/13/
has the stack size error
with master
https://jsfiddle.net/niran_manandhar/tuj874Lz/5/
doesnt have the stack size error but chart doesn't seem right

[TorsteinHonsi]

You're right, there's still a geometry issue even though the stack size issue is resolved. As a workaround we can override the translate function, though there's still something wrong with the green link: https://jsfiddle.net/highcharts/jfeo8tdy/9/

[niran-manandhar]

managed to do it with margins and clip:false
https://jsfiddle.net/niran_manandhar/vL913mkb/

[sruchot]

Hello,
Someone advise me to comment this issue since it's related to one I'm having at the moment.

When having a reverse flow in your data the chart will display correctly on first render but will behave differently on any resize/update action.

A quick example is set up at: https://jsfiddle.net/Lelith/7omz94gc/1/

You just have to increase the size of the chart container to reproduce the issue.
Everything looks good on first rendering though.

(original post on HC forum was https://www.highcharts.com/forum/viewtopic.php?f=9&t=44510 )

Thanks!

[applewil]

Is there a workaround for this issue?

When I plot a->d and b->c->d the arrangement is compressed until I resize the panel triggering a reflow

data: [
  ['a', 'd', 1],
  ['b', 'c', 1],
  ['c', 'd', 1]
]

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

How do I get the uncompressed node arrangement when the panel loads?

[raf18seb]

Hi @applewil,

As a workaround, you can use the chart.events.load event to reflow the chart, see demo: https://jsfiddle.net/BlackLabel/xw24o8kh/