chartjs
Stacked Bar Chart show/hide animations have wrong target values
Expected behavior
when showing/hiding parts of a stacked bar chart in conjunction with fixed y-coordinates for the show/hide animation both the upper and lower end of the part which is being shown/hidden should animate towards the set y-coordinate.
Current behavior
instead what happens is that the upper end moves towards the set y-coordiante, which is correct. however the lower end moves towards the upper end of the part which is above the part that is being hidden. check out the reproduction sample and let me explain again using that sample as a reference: in the legend click on the item for "A". as you can see the A-part of all bars is being hidden. But the animation is wrong. So what hapens is that the upper end of the A-parts moves towards the set y-coordinate. however, as i said, the lower end of the A-part moves towards the upper end of the B-part which is on top of it. What should happen instead is that both the upper and the lower end of a part move towards the set y-coordinate.
Reproducible sample
https://codepen.io/hemmoleg-the-sans/pen/yLxQyEG
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
v4.2.1
Browser name and version
No response
Link to your project
No response
I think the relation between top and bottom is controlled by height, which could also be animated. Disclaimer: I did not check if height is the actual property, it could be something else too.
@kurkle in a bar controller, the properties are ['x', 'y', 'base', 'width', 'height'].
@hemmoleg I have played a bit, maybe it's what you are looking for: https://codepen.io/stockinail/pen/dyqQGXP:
@stockiNail thank you very much for your reply. while it wasnt exactly what i was looking for, it was enough to point me in the right direction. i had no idea what the syntax for these custom animtions would have to look like. but thanks to you now i know :) also i think this can be closed, since my initial assumption that this was a bug was just based on a rather poor documentation on the chartjs website.
The real issue is that applyStack() returns the wrong value for a dataset index if that index (dsIndex) is not part of stack.keys. It returns the sum of all values instead of 0.
Since hidden datasets are removed from stack.keys, the newly-hidden dataset gets a target value that is very high instead of zero, causing it to grow towards the top – instead of shrinking while disappearing.
