Bars overlap each other when stackAccessors and minBarHeight used together

[maxcold]

Describe the issue
When minBarHeight is used together with stackAccessors to have bars stacked on each other in BarSeries component, bars which are subjects of minBarHeight overlap other bars. This leads to these bars not being visible on the chart

To Reproduce
codesandbox example

Expected behaviour
Bars with min-height are stacked correctly and visible on the chart

Screenshots
Min height is 10px. In the first stack, the second bar goes outside of the visible area. In the third stack, one bar is not visible at all.

CRITICAL bar is almost not visible even though the min-height is set to 5

Version (please complete the following information):

• OS: MacOs
• Browser: Chrome
• Elastic Charts: 57.0.1

Additional context
it looks like the Y coordinate is being calculated incorrectly, which leads to bars overlapping each other

Errors in browser console
n/a

Kibana Cross Issues

• Fix bar chart minimum size kibana#162028

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• Every related Kibana issue is listed under Kibana Cross Issues list and the kibana cross issue tag is applied

[markov00]

Thank you @maxcold for the two issues identified here.
Double checking your code I see:

• in the first bar, the minBarHeight is not considered when computing the total sum of the first column.
• in the last bar, it looks like it is not applied for the green series at all (even changing the values)

All these are valid bugs, but I kindly suggest to not use a minBarHeight higher than 2px -3px. If for example you have a chart that is 200px height and you use a 10px minBarHeight when for example your Y domain goes from 0 to 10, it means that everything that is below 0.5 units looks the same.
This should be used only as a trick to show very low values when the domain is very wide.

Update:
now that I've took a closer look at the code, I believe we introduced that minBarHeight only at the rendering level, not at the data domain level, basically because this is configured in screen coordinate and I probably can't easily translate that back to domain coordinate to push the bars that are on top of each other.

Question for you: what is your use case for this minBarHeight? I'm just asking to understand a bit more the case

[maxcold]

Hi @markov00, thanks for looking into the issue and providing more context!
You can find the example of the use case in the linked issue elastic/kibana#162028, we use it in Cloud Security solution to showcase the distribution of vulnerabilities and misconfigurations by severity type. As you see in this screenshot

the bar with critical vulnerabilities is barely visible, even though we use 5px as minBarHeight (I used 10px in the demo just to showcase the issue more prominently). Hope this information helps.
I don't know much about the internals of elastic-charts yet, that's why I can't really comment on the technical details of the minBarHeight implementation, but let me know if I can help somehow in fixing the issue

[markov00]

Since critical is critical to show, I believe you can also improve a bit the screen space usage if you build something like that

In this way you always have all your data shown clearly, you can quickly compare each section, and also show the numbers directly, and critical will be always clearly visible.

I know, this is a workaround and you have also to deal with another configuration for the tooltip (see https://codesandbox.io/s/awesome-zhukovsky-rmgsxq?file=/src/App.tsx) but could be a viable option in the meantime.

[maxcold]

@markov00 Thanks for the suggestion, but it won't work for us as we have trend charts where we use this bar representation. I should have shared the full example

[maxcold]

What we did recently - we reverted the order of the bars, to have critical ones on top, this way there is a higher chance that they will be visible, but still due to the bag it's not very reliable

[ArchitGajjar]

Hi @maxcold I will start working on this bug, can you please assign this to me ?