Stacked Floating Bars not rendered correctly

[nmakhari]

Expected behavior

When I create a stacked bar chart, and provide [start,end] values as data (for floating bars) I should see the bars rendered between the specified values.

Current behavior

Depending on the size of the floating bars, and the order that they are rendered, floating bars in the same stack are rendered in the wrong spots.

Reproducible sample

https://codepen.io/nmakhari/pen/MWGzKeV

Optional extra steps/info to reproduce

If you change the bottom bar in the example to be [-5, 4] instead of [-4, 4] (although it seems that if the bottom bar is the same size or larger than the top one, the issue does not occur, this is not true. In my testing I was able to trigger the bug when this condition wasn't true).

The order property on the datasets also plays into this somehow, when the order is defined such that the top bar is rendered first, the issue does not occur. Unfortunately, in my testing, when the order was defined as such (greater value bars rendered first) the issue would still happen if you reverse the orientation of the bars across the y axis.

SO Question: https://stackoverflow.com/questions/74009641/stacked-bar-chart-with-floating-bars-does-not-render-correctly

Possible solution

No response

Context

I want to shift the bars in a stacked bar chart away from the origin by a fixed amount. I want the bars to have a certain magnitude, but I want them to start for example, at y = -30 and be rendered as if they were on the y axis.

More specifically, I'm using a horizontal chart, with stacked and grouped bars.

I was attempting to follow the solution here: https://stackoverflow.com/questions/63827750/how-can-i-change-the-starting-point-of-horizontal-bars-in-charts-js when I noticed errors using stacked bars in my project.

chart.js version

3.9.1

Browser name and version

No response

Link to your project

No response

[Kit-p]

@nmakhari
As much as I would like to help, I personally have not used Chart.js, so unfortunately I am not sure whether the current behavior or your suggested one is correct.

Before you start working on a fix, you should look at the fixture test for this use case. The test (https://github.com/chartjs/Chart.js/blob/master/test/fixtures/controller.bar/floatBar/float-bar-stacked.json) and the result (https://github.com/chartjs/Chart.js/blob/master/test/fixtures/controller.bar/floatBar/float-bar-stacked.png) here.

If this indeed should be fixed, the following functions are likely to be responsible.

1. https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.bar.js#L540
2. https://github.com/chartjs/Chart.js/blob/master/src/core/core.datasetController.js#L70

Lastly, feel free to join the Slack community, the maintainers are very helpful there.

[kurkle]

When I create a stacked bar chart, and provide [start,end] values as data (for floating bars) I should see the bars rendered between the specified values.

If I understand you correctly, you don't want the values stacked at all, only the bars in the same column (= stacking in the index axis direction). If I'm right, this should be what you are looking for: https://codepen.io/kurkle/pen/xxjBBwx

[nmakhari]

Turns out this was just a misunderstanding of the behavior of stacked charts. The code pen doesn't seem to be working currently, but the strategy did work (when I implemented it a couple of weeks ago). Closing the issue, perhaps there needs to be some better documentation around this use case, so that people don't make the same mistake in the future.