Stacked bar charts do not render correctly with Positive / Negative Values

[bvader]

Describe the bug
Stacked bar charts do not render correctly with Positive / Negative Values
Also see Discuss Here

To Reproduce
Steps to reproduce the behavior:
Add the sample data below
Create a Non-Stacked and Stacked Lens Visualizations
Observe Correct Non-Stacked Bar Chart
Observer Incorrect Stacked Chart

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Version (please complete the following information):

• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Elastic Charts: [e.g. 1.0.1] 7.13.4, 7.14.0-SNAPSHOT

Sample Data

DELETE discuss-pos-neg

PUT discuss-pos-neg/
{
  "mappings": {
    "properties": {
      "category" : {"type": "keyword"},
      "value" : {"type": "float"}
    }
  }
}


POST discuss-pos-neg/_doc
{
      "category" : "10-20",
      "value" : 32
}

POST discuss-pos-neg/_doc
{
      "category" : "10-20",
      "value" : -45
}


POST discuss-pos-neg/_doc
{
      "category" : "20-30",
      "value" : 64
}

POST discuss-pos-neg/_doc
{
      "category" : "20-30",
      "value" : -23
}

POST discuss-pos-neg/_doc
{
      "category" : "30-40",
      "value" : 57
}

POST discuss-pos-neg/_doc
{
      "category" : "30-40",
      "value" : -33
}

GET discuss-pos-neg/_search

Non Stacked Chart Looks Correct

Stacked Chart is Not Correct. It should look the same as above bu on the same line / category.

[nickofthyme]

See reproduction codesandbox

[nickofthyme]

@monfera @markov00 what do you think the solution is here?

It seems like the only way to achieve the stacked result is to group the bars by polarity to not occlude other positive bars.

[markov00]

@nickofthyme yep you are right, positive bars should be stacked with positive ones, negative with negative ones. @monfera do you see any drawback?

[monfera]

Indeed if we decide to support this "gross type" of stacking, all positives should be above zero and all negatives below zero. But it's not a good visualization in my opinion to begin with. Even something like a clustered bar chart, with every second bar showing negatives/positives for the same bin would be an improvement. Waterfall chart would be better, though we have no support for it right now

[markov00]

The clustered bar chart example here looks good to you?

[dej611]

More examples from this cross Kibana issue:

elastic/kibana#118066

As shown in the pictures, the order of the series matter, while the example from @nickofthyme seems more robust, to me.