Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stacked Bar Chart show/hide animations have wrong target values #11198

Open
hemmoleg opened this issue Mar 22, 2023 · 4 comments · May be fixed by #11834
Open

Stacked Bar Chart show/hide animations have wrong target values #11198

hemmoleg opened this issue Mar 22, 2023 · 4 comments · May be fixed by #11834
Labels
type: bug

Comments

@hemmoleg
Copy link

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
@kurkle
Copy link
Member

kurkle commented Mar 22, 2023

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.

@stockiNail
Copy link
Contributor

@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:

@hemmoleg
Copy link
Author

@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.

@rluba
Copy link

rluba commented Jul 15, 2024

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.

@rluba rluba linked a pull request Jul 15, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: applyStack() returned the sum of all values for hidden dataset indices FabmanHQ/Chart.js
4 participants
@rluba @stockiNail @kurkle @hemmoleg