From 1f07d67746a000cd0ca42ce55c07a363945e259f Mon Sep 17 00:00:00 2001
From: Chandrasekaran Akash <enigmatrix2000@gmail.com>
Date: Wed, 26 Mar 2025 05:04:21 +0800
Subject: [PATCH 1/3] fix(bar): animate bars from 'bottom'

---
 src/chart/bar/BarView.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index a34cc153a0..c3209e1fbe 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -783,9 +783,18 @@ const elementCreator: {
         rect.name = 'item';
 
         if (animationModel) {
+            const isStacked = seriesModel.get('stack') !== undefined;
             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'
+                const stackAnimateProperty = isHorizontal ? 'y' : 'x' as 'y' | 'x';
+                const coordSys = (seriesModel.coordinateSystem as Cartesian2D);
+                const extent = coordSys.getOtherAxis(coordSys.getBaseAxis()).getGlobalExtent()[0];
+                rectShape[stackAnimateProperty] = extent;
+            }
         }
         return rect;
     },

From 444c75dbf0d9e43635580d307a6c6b5e3da88701 Mon Sep 17 00:00:00 2001
From: Chandrasekaran Akash <enigmatrix2000@gmail.com>
Date: Sat, 29 Mar 2025 00:37:18 +0800
Subject: [PATCH 2/3] fix(bar): start animation from valueAxisStart

---
 src/chart/bar/BarView.ts | 11 ++++++-----
 src/layout/barGrid.ts    |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index c3209e1fbe..5a6e17ee1b 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -783,17 +783,18 @@ const elementCreator: {
         rect.name = 'item';
 
         if (animationModel) {
-            const isStacked = seriesModel.get('stack') !== undefined;
+            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, irregardless of 'inverse'
+                // 'bottom' of the value axis, regardless of 'inverse'
                 const stackAnimateProperty = isHorizontal ? 'y' : 'x' as 'y' | 'x';
-                const coordSys = (seriesModel.coordinateSystem as Cartesian2D);
-                const extent = coordSys.getOtherAxis(coordSys.getBaseAxis()).getGlobalExtent()[0];
-                rectShape[stackAnimateProperty] = extent;
+                const itemLayout = data.getItemLayout(newIndex);
+                // valueAxisStart is unset only when `large` is true,
+                // in which case this branch is not taken
+                rectShape[stackAnimateProperty] = itemLayout.valueAxisStart;
             }
         }
         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;

From 26faaa42f1088271056af0ad554e80d368598a2b Mon Sep 17 00:00:00 2001
From: Chandrasekaran Akash <enigmatrix2000@gmail.com>
Date: Sun, 30 Mar 2025 02:41:01 +0800
Subject: [PATCH 3/3] feat(bar): add stack bar anim test, fit to grid

---
 src/chart/bar/BarView.ts           |  11 +-
 test/bar-cartesian-stack-anim.html | 457 +++++++++++++++++++++++++++++
 2 files changed, 467 insertions(+), 1 deletion(-)
 create mode 100644 test/bar-cartesian-stack-anim.html

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 5a6e17ee1b..c7c65225a9 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -794,7 +794,16 @@ const elementCreator: {
                 const itemLayout = data.getItemLayout(newIndex);
                 // valueAxisStart is unset only when `large` is true,
                 // in which case this branch is not taken
-                rectShape[stackAnimateProperty] = itemLayout.valueAxisStart;
+                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/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 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+        <div id="main1"></div>
+
+
+        <div id="main2"></div>
+
+
+        <div id="main3"></div>
+
+
+        <div id="main4"></div>
+
+
+        <div id="main5"></div>
+
+
+        <div id="main6"></div>
+
+
+        <div id="main7"></div>
+
+
+        <div id="main8"></div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    type: 'category',
+                },
+                grid: {
+                    left: 100,
+                    right: 100,
+                    bottom: 100,
+                    top: 100,
+                },
+                yAxis: {},
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: 'Check bars animate from bottom in stack with grid padding',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    type: 'category',
+                },
+                yAxis: {
+                    startValue: -50,
+                    min: -150,
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: 'Check bars animate from startValue in stack',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    type: 'category',
+                },
+                yAxis: {
+                    startValue: -150,
+                    min: -50,
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: 'Check bars animate from min in stack',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    type: 'category',
+                },
+                yAxis: {
+                    inverse: true,
+                    startValue: -50,
+                    min: -150,
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main3', {
+                title: 'Check bars animate from startValue in stack (inverse)',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    type: 'category',
+                },
+                yAxis: {
+                    inverse: true,
+                    startValue: -150,
+                    min: -50,
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main4', {
+                title: 'Check bars animate from min in stack (inverse)',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    startValue: -50,
+                    min: -150,
+                },
+                yAxis: {
+                    type: 'category',
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main5', {
+                title: 'Check bars animate from startValue in stack (vertical)',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    startValue: -150,
+                    min: -50,
+                },
+                yAxis: {
+                    type: 'category',
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main6', {
+                title: 'Check bars animate from min in stack (vertical)',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    inverse: true,
+                    startValue: -50,
+                    min: -150,
+                },
+                yAxis: {
+                    type: 'category',
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main7', {
+                title: 'Check bars animate from startValue in stack (inverse, vertical)',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                animationDuration: 8000,
+                xAxis: {
+                    inverse: true,
+                    startValue: -150,
+                    min: -50,
+                },
+                yAxis: {
+                    type: 'category',
+                },
+                series: [{
+                    type: 'bar',
+                    stack: 'a',
+                    data: [3, 4, 5, 6]
+                }, {
+                    type: 'bar',
+                    stack: 'a',
+                    data: [1, 2, 4, 3]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main8', {
+                title: 'Check bars animate from min in stack (inverse, vertical)',
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+