fix(bar): only morph surviving bars on data update; snap the rest

Bar-family update animations were producing "from 0,0" artifacts and
floating bars on stacked legend toggles. Root cause: after
`getPreviousPath` returned the previous render's full `d` string, the
path-builders still appended ~5 line commands to it as padding, so
`pathFrom` ended up with more SVG commands than `pathTo` and SVG.js
morph produced garbage.

The padding was only needed for the initial-mount case (where
`pathFrom` is a single `move()` and must be padded to match `pathTo`).
Restructure each bar/column/funnel/candlestick/boxplot path-builder
to build `pathTo` first (incl. `roundPathCorners`), then split on
update vs. initial mount:

- Update branch calls `getPreviousPath(realIndex, j, pathTo)`, which
  returns the captured d only if its SVG command count matches
  `pathTo` (survivor with stable shape → smooth morph). On mismatch
  (corner state flipped, e.g. bar became new top of stack) or no
  capture (re-enabled series), returns `pathTo` itself, making
  `pathFrom === pathTo` a visual no-op (snap).
- Initial-mount branch keeps the existing baseline + padding so the
  rise-from-baseline animation is unchanged.

Author: junedchhipa

src/charts/Bar.js

@@ -608,15 +608,14 @@ class Bar {
       const _zeroW = zeroW ?? 0
       zeroW =
         _zeroW -
-        /** @type {number} */ ((
+        /** @type {number} */ (
           /** @type {any} */ (
             this.barHelpers.getXForValue(
               /** @type {any} */ (this.series)[i][j],
               _zeroW,
             )
-          )
-        ) -
-          _zeroW) /
+          ) - _zeroW
+        ) /
           2
     }
 
@@ -807,29 +806,52 @@ class Bar {
     }
   }
 
-  /** getPreviousPath is a common function for bars/columns which is used to get previous paths when data changes.
-   * @memberof Bar
-   * @param {number} realIndex - current iterating i
-   * @param {number} j - current iterating series's j index
-   * @return {string} pathFrom is the string which will be appended in animations
+  /**
+   * Resolve `pathFrom` for a bar on data update. Returns the previous render's
+   * `d` string for the same `(realIndex, j)` only when its SVG command count
+   * matches `pathTo` — that's the survivor-with-stable-shape case where SVG.js
+   * morph produces a smooth resize. When commands mismatch (corner state
+   * flipped, e.g. bar became new top-of-stack after legend toggle) or the bar
+   * is genuinely new (no captured previous), returns `pathTo` — which makes
+   * pathFrom === pathTo so morph is a visual no-op (snap).
+   *
+   * @param {number} realIndex - stable series index from `data:realIndex`
+   * @param {number} j - data-point index within the series
+   * @param {string} pathTo - the freshly-built path for this bar (post-roundPathCorners)
+   * @returns {string}
    **/
-  getPreviousPath(realIndex, j) {
+  getPreviousPath(realIndex, j, pathTo) {
     const w = this.w
-    let pathFrom = 'M 0 0'
+    let oldD = null
     for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
       const gpp = w.globals.previousPaths[pp]
-
       if (
         gpp.paths &&
         gpp.paths.length > 0 &&
         parseInt(gpp.realIndex, 10) === parseInt(String(realIndex), 10)
       ) {
-        if (typeof w.globals.previousPaths[pp].paths[j] !== 'undefined') {
-          pathFrom = w.globals.previousPaths[pp].paths[j].d
+        if (typeof gpp.paths[j] !== 'undefined') {
+          oldD = gpp.paths[j].d
         }
       }
     }
-    return pathFrom
+    if (oldD && Bar.pathCommandCount(oldD) === Bar.pathCommandCount(pathTo)) {
+      return oldD
+    }
+    return pathTo
+  }
+
+  /**
+   * Count SVG path commands (M, L, C, Q, Z, etc.). Used to detect whether
+   * two paths can be morphed safely — SVG.js requires matching command counts.
+   *
+   * @param {string} d
+   * @returns {number}
+   */
+  static pathCommandCount(d) {
+    if (!d) return 0
+    const matches = d.match(/[A-Za-z]/g)
+    return matches ? matches.length : 0
   }
 }
 

src/charts/BoxCandleStick.js

@@ -283,11 +283,6 @@ class BoxCandleStick extends Bar {
     }
 
     let pathTo
-    let pathFrom = graphics.move(barXPosition + barWidth / 2, y1)
-    if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.getPreviousPath(realIndex, j)
-    }
-
     if (this.isOHLC) {
       const centerX = barXPosition + barWidth / 2
       const openY = zeroH - ohlc.o / yRatio
@@ -344,7 +339,16 @@ class BoxCandleStick extends Bar {
       ]
     }
 
-    pathFrom = pathFrom + graphics.move(barXPosition, y1)
+    let pathFrom
+    if (w.globals.previousPaths.length > 0) {
+      // Update: survivor with matching command count → animate; else snap.
+      pathFrom = this.getPreviousPath(realIndex, j, pathTo[0])
+    } else {
+      // Initial mount: baseline collapsed at the bar's center.
+      pathFrom =
+        graphics.move(barXPosition + barWidth / 2, y1) +
+        graphics.move(barXPosition, y1)
+    }
 
     if (!w.axisFlags.isXNumeric) {
       x = x + xDivision
@@ -435,11 +439,6 @@ class BoxCandleStick extends Bar {
       m = zeroW + ohlc.m / yRatio
     }
 
-    let pathFrom = graphics.move(x1, barYPosition + barHeight / 2)
-    if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.getPreviousPath(realIndex, j)
-    }
-
     const pathTo = [
       graphics.move(x1, barYPosition) +
         graphics.line(x1, barYPosition + barHeight / 2) +
@@ -466,7 +465,16 @@ class BoxCandleStick extends Bar {
         'z',
     ]
 
-    pathFrom = pathFrom + graphics.move(x1, barYPosition)
+    let pathFrom
+    if (w.globals.previousPaths.length > 0) {
+      // Update: survivor with matching command count → animate; else snap.
+      pathFrom = this.getPreviousPath(realIndex, j, pathTo[0])
+    } else {
+      // Initial mount: baseline collapsed at the bar's center.
+      pathFrom =
+        graphics.move(x1, barYPosition + barHeight / 2) +
+        graphics.move(x1, barYPosition)
+    }
 
     if (!w.axisFlags.isXNumeric) {
       y = y + yDivision

src/charts/common/bar/Helpers.js

@@ -485,47 +485,44 @@ export default class Helpers {
     y1 += 0.001 - strokeCenter * direction
     y2 += 0.001 + strokeCenter * direction
 
-    let pathTo = graphics.move(x1, y1)
-    let pathFrom = graphics.move(x1, y1)
-
     const sl = graphics.line(x2, y1)
-    if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
-    }
-
-    pathTo =
-      pathTo +
-      graphics.line(x1, y2) +
-      graphics.line(x2, y2) +
-      sl +
-      (w.config.plotOptions.bar.borderRadiusApplication === 'around' ||
+    const closing =
+      w.config.plotOptions.bar.borderRadiusApplication === 'around' ||
       this.arrBorderRadius[realIndex][j] === 'both'
         ? ' Z'
-        : ' z')
+        : ' z'
 
-    // the lines in pathFrom are repeated to equal it to the points of pathTo
-    // this is to avoid weird animation (bug in svg.js)
-    pathFrom =
-      pathFrom +
-      graphics.line(x1, y1) +
-      sl +
-      sl +
-      sl +
-      sl +
+    let pathTo =
+      graphics.move(x1, y1) +
+      graphics.line(x1, y2) +
+      graphics.line(x2, y2) +
       sl +
-      graphics.line(x1, y1) +
-      (w.config.plotOptions.bar.borderRadiusApplication === 'around' ||
-      this.arrBorderRadius[realIndex][j] === 'both'
-        ? ' Z'
-        : ' z')
-
+      closing
     if (this.arrBorderRadius[realIndex][j] !== 'none') {
       pathTo = graphics.roundPathCorners(
         pathTo,
         w.config.plotOptions.bar.borderRadius
       )
     }
 
+    let pathFrom
+    if (w.globals.previousPaths.length > 0) {
+      // Update: survivor with matching command count → animate; else snap.
+      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo)
+    } else {
+      // Initial mount: rise from baseline; pad command count to match pathTo.
+      pathFrom =
+        graphics.move(x1, y1) +
+        graphics.line(x1, y1) +
+        sl +
+        sl +
+        sl +
+        sl +
+        sl +
+        graphics.line(x1, y1) +
+        closing
+    }
+
     if (w.config.chart.stacked) {
       let _ctx = this.barCtx
       _ctx = this.barCtx[seriesGroup]
@@ -600,11 +597,12 @@ export default class Helpers {
       graphics.line(bottomLeftX, y2) +
       ' Z'
 
-    let pathFrom = graphics.move(center, y1)
+    let pathFrom
     if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
+      // Update: survivor with matching command count → animate; else snap.
+      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo)
     } else {
-      // Start collapsed at the centerline so the trapezoid expands outward.
+      // Initial mount: collapsed at the centerline so the trapezoid expands outward.
       pathFrom =
         graphics.move(center, y1) +
         graphics.line(center, y1) +
@@ -672,46 +670,45 @@ export default class Helpers {
     const isFunnel = this.barCtx.isFunnel
     const fromX = isFunnel ? (x1 + x2) / 2 : x1
 
-    let pathTo = graphics.move(x1, y1)
-    let pathFrom = graphics.move(fromX, y1)
-
-    if (w.globals.previousPaths.length > 0) {
-      pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
-    }
-
     const sl = graphics.line(x1, y2)
-    pathTo =
-      pathTo +
-      graphics.line(x2, y1) +
-      graphics.line(x2, y2) +
-      sl +
-      (w.config.plotOptions.bar.borderRadiusApplication === 'around' ||
+    const closing =
+      w.config.plotOptions.bar.borderRadiusApplication === 'around' ||
       this.arrBorderRadius[realIndex][j] === 'both'
         ? ' Z'
-        : ' z')
-
-    const slFrom = isFunnel ? graphics.line(fromX, y2) : sl
-    pathFrom =
-      pathFrom +
-      graphics.line(fromX, y1) +
-      slFrom +
-      slFrom +
-      slFrom +
-      slFrom +
-      slFrom +
-      graphics.line(fromX, y1) +
-      (w.config.plotOptions.bar.borderRadiusApplication === 'around' ||
-      this.arrBorderRadius[realIndex][j] === 'both'
-        ? ' Z'
-        : ' z')
+        : ' z'
 
+    let pathTo =
+      graphics.move(x1, y1) +
+      graphics.line(x2, y1) +
+      graphics.line(x2, y2) +
+      sl +
+      closing
     if (this.arrBorderRadius[realIndex][j] !== 'none') {
       pathTo = graphics.roundPathCorners(
         pathTo,
         w.config.plotOptions.bar.borderRadius
       )
     }
 
+    let pathFrom
+    if (w.globals.previousPaths.length > 0) {
+      // Update: survivor with matching command count → animate; else snap.
+      pathFrom = this.barCtx.getPreviousPath(realIndex, j, pathTo)
+    } else {
+      // Initial mount: rise from baseline; pad command count to match pathTo.
+      const slFrom = isFunnel ? graphics.line(fromX, y2) : sl
+      pathFrom =
+        graphics.move(fromX, y1) +
+        graphics.line(fromX, y1) +
+        slFrom +
+        slFrom +
+        slFrom +
+        slFrom +
+        slFrom +
+        graphics.line(fromX, y1) +
+        closing
+    }
+
     if (w.config.chart.stacked) {
       let _ctx = this.barCtx
       _ctx = this.barCtx[seriesGroup]