Overlap problem

[kamilpogo]

I created an example where the flows overlap: https://codesandbox.io/s/blazing-dawn-b07djs?file=/src/index.js The node with the name "bug" has a wrong position. Do you see a way how to fix this except adding more nodes?

[kurkle]

No, I don't see a way of fixing it just by configuration :/

[richardtallent-erm]

Since "bug" is the only item in column "3", it wants to be higher.

Reorganizing the flows can help keep things more linear, at the cost of potentially losing some semantic value in which flows are shown first.

{ from: "e", to: "c", flow: 7 },
{ from: "c", to: "f", flow: 7 },
{ from: "c", to: "g", flow: 7 },
{ from: "a", to: "c", flow: 5 },
{ from: "a", to: "d", flow: 10 },
{ from: "h", to: "i", flow: 7 },
{ from: "a", to: "b", flow: 10 },
{ from: "d", to: "h", flow: 7 },

[hanstarj]

@richardtallent-erm Thanks, I've encountered into the same (I think) issue:

I guess it tries to center items given the max height of the chart, without considering items in other columns. I don't think it is desired/expected behavior generally.

[uberhus]

I guess I'm writing about the same issue here: https://github.com/kurkle/chartjs-chart-sankey/discussions/108

Maybe I could solve it by creating additional node for the links that overlap (continuing the flow with the same value so that there would be an even amount of nodes on all levels), but that would look kind of silly, especially with the gradients and highlighted nodes.

I wouldn't mind if the nodes would end earlier, like in the sankey here:

Maybe a quick way to do that would be to add a possibility to create invisible links/nodes, for example if you set this in @hanstar17 's chart above:

{from: "Income Tax": to: null, flow: null}

The "Income Tax" node would end at the same level as "Net Income" and there would be an invisible node after the "Income Tax" which wouldn't show any info or link. At the moment even if you set the flow to 0 and color to transparent it still draws a line.

Another option could be that there would be a way to create some sort of "extension flow" meaning that - using the @hanstar17 chart as an example again - you could create an additional node between "Income" and "Income Tax" that would be at the same level as "Net Income" but wouldn't be visible, but would set the link below "Net Income" which would prevent the overlap. Something like this:

{from: "Income", to: "extension", flow: "30", extension: true}, {from: "extension", to "Income Tax", flow: 30, extension true}

In this case all links would end at the same level and the gradient would continue over the extension node.