Skip to content

Animate stacked bars in Bar Series from the 'bottom' #20862

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Animate stacked bars in Bar Series from the 'bottom' #20862

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1f07d67
fix(bar): animate bars from 'bottom'
Enigmatrix Mar 25, 2025
444c75d
fix(bar): start animation from valueAxisStart
Enigmatrix Mar 28, 2025
26faaa4
feat(bar): add stack bar anim test, fit to grid
Enigmatrix Mar 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/chart/bar/BarView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -783,9 +783,18 @@ const elementCreator: {
rect.name = 'item';

if (animationModel) {
const isStacked = seriesModel.get('stack') !== undefined;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!= null should be better.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed in 444c75d

const rectShape = rect.shape;
const animateProperty = isHorizontal ? 'height' : 'width' as 'width' | 'height';
rectShape[animateProperty] = 0;
if (isStacked) {
// if it's stacked, the bar will be animated from the
// 'bottom' of the value axis, irregardless of 'inverse'
Copy link
Preview

Copilot AI Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Replace 'irregardless' with 'regardless' for clarity and formal tone.

Suggested change
// 'bottom' of the value axis, irregardless of 'inverse'
// 'bottom' of the value axis, regardless of 'inverse'

Copilot uses AI. Check for mistakes.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed in 444c75d

const stackAnimateProperty = isHorizontal ? 'y' : 'x' as 'y' | 'x';
const coordSys = (seriesModel.coordinateSystem as Cartesian2D);
const extent = coordSys.getOtherAxis(coordSys.getBaseAxis()).getGlobalExtent()[0];
Copy link
Contributor

@Ovilia Ovilia Mar 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extent[0] is the minimum value of the axis, which may not be expected to be the starting point of bar growing in the case with negative axes. Consider using startValue instead. Make sure you test the cases in varied value ranges.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep seems like you are correct, for test/bar-stack.html I edited the yAxis to have a startValue: -30 and min: -100 and it animates from the bottom (first 2s):

image

nani.mp4

The other half of the video describes a bug (not sure): the right most bar stack in that video isn't placed correctly (not respecting startValue). And by toggling the 'bottom'-most series of the stacked bar chart, the problem fixes itself. I can raise this in a issue if this is confirmed to be a bug.

I'll fix the startValue issue in a bit;

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed in 444c75d - but will add tests in another commit

rectShape[stackAnimateProperty] = extent;
}
}
return rect;
},
Expand Down