[Bug] Sankey chart edge width is zero when the edge value is negative (edge width should be proportional to abs(edge.value) )

[Misaosama]

Version

5.4.0

Link to Minimal Reproduction

https://jsfiddle.net/he4m275c/

Steps to Reproduce

If the source node a goes to target nodes b and c. The behavior is not expected because the width of edge with negative value is 0. +--------------------+ | a: 100 --> b: 150 | | --> c: -50 | +-------------------+

My option is option = { tooltip: { trigger: 'item', triggerOn: 'mousemove', }, slient: true, series: { slient: true, type: 'sankey', layout: 'none', emphasis: { focus: 'adjacency' }, label: { formatter: (params) => { return params.name + ': ' + params.value } }, tooltip: { trigger: 'item', triggerOn: 'mousemove' }, selectedMode: true, data: [ { name: 'a', value: 100, depth: 1, itemStyle: { color: 'blue' } }, { name: 'b', value: 150, depth: 2, itemStyle: { color: 'green' } }, { name: 'c', value: -50, depth: 2, itemStyle: { color: 'red' } }, ], links: [ { source: 'a', target: 'b', value:150, lineStyle: { color: 'green', opacity: 0.4 } }, { source: 'a', target: 'c', value: -50, lineStyle: { color: 'red', opacity: 0.4 } }, ] } };

Current Behavior

Expected Behavior

The expected behavior should be like this. The "Operating Loss" means negative value.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

How about cheating a little with the formatter, does it look ok? Demo Code

[Misaosama]

How about cheating a little with the formatter, does it look ok? Demo Code

This does not work. As you can see the length of node a is greater than the length of node b, but the value of node a (which is 100) is smaller than the value of node b (which is 150). The node length should be proportional to its value; otherwise the sankey chart makes no sense.

[helgasoft]

Agree - node length should be proportional to its value. But there is a second rule in sankey(flow) diagrams - sums of quantities at each level should be equal. Sum at start should be equal to sum at end, otherwise the chart does not make sense. A good example of incorrect chart is the Expected Behavior chart sample above (1.815 = 1.641 + 3.456 ?!) It turns out the correct equation is NetRevenue + Oper.Loss = Oper.Expenses (1.815 + 1.641 = 3.456). And here is how it looks in ECharts: Demo Code

[Misaosama]

Agree - node length should be proportional to its value. But there is a second rule in sankey(flow) diagrams - sums of quantities at each level should be equal. Sum at start should be equal to sum at end, otherwise the chart does not make sense. A good example of incorrect chart is the Expected Behavior chart sample above (1.815 = 1.641 + 3.456 ?!) It turns out the correct equation is NetRevenue + Oper.Loss = Oper.Expenses (1.815 + 1.641 = 3.456). And here is how it looks in ECharts: Demo Code

In real case, the "net revenue" of a company will be divided into two parts: "Operating Income (or Loss)" and "Operating Expenses", so the source shoule be "Net Revenue" and targets should always be "Operating Income or Loss" and "Operating Expenses".

The mathematical value for "Oper.Loss" should be -1.641, which make the equaltion looks like Net Revenue ($1.815) = Operting Income or Loss (-$1.641) + Oper Expenses ($3.456). This is the actual equation and this is simiar to my example "a(100) = b(150) + c(-50)"

[mleegwt]

I've just spent quite some time figuring out a similar issue. In my situation data elements did not have a value. The presented value and the label indicated '0' instead of the negative value. But the source was modified by the negative amount... Ouch. In my case the negative value was incorrect, but it took quite some time to spot that the input was negative...

Is there a way that negative values result in an error presentation by default?