diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index a34cc153a0..c7c65225a9 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -783,9 +783,28 @@ const elementCreator: {
rect.name = 'item';
if (animationModel) {
+ const isStacked = seriesModel.get('stack') != null;
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, regardless of 'inverse'
+ const stackAnimateProperty = isHorizontal ? 'y' : 'x' as 'y' | 'x';
+ const itemLayout = data.getItemLayout(newIndex);
+ // valueAxisStart is unset only when `large` is true,
+ // in which case this branch is not taken
+ const valueAxisStart = itemLayout.valueAxisStart;
+
+ // make sure we don't go beyond the grid
+ const coordSys = (seriesModel.coordinateSystem as Cartesian2D);
+ const valueAxis = coordSys.getOtherAxis(coordSys.getBaseAxis());
+ const extentStart = valueAxis.getGlobalExtent()[0];
+ // compare with extentStart in the same direction as the stackAnimateProperty
+ const cmpFn = (valueAxis.inverse === isHorizontal) ? mathMax : mathMin;
+
+ rectShape[stackAnimateProperty] = cmpFn(valueAxisStart, extentStart);
+ }
}
return rect;
},
diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts
index 3f6aeb4fb6..b478b487bd 100644
--- a/src/layout/barGrid.ts
+++ b/src/layout/barGrid.ts
@@ -559,7 +559,7 @@ export function createProgressiveLayout(seriesType: string): StageHandler {
}
if (!isLarge) {
- data.setItemLayout(dataIndex, { x, y, width, height });
+ data.setItemLayout(dataIndex, { x, y, width, height, valueAxisStart });
}
else {
largePoints[idxOffset] = x;
diff --git a/test/bar-cartesian-stack-anim.html b/test/bar-cartesian-stack-anim.html
new file mode 100644
index 0000000000..c512cd8cfc
--- /dev/null
+++ b/test/bar-cartesian-stack-anim.html
@@ -0,0 +1,457 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+