@coinbase/cds-web-visualization 3.4.0-beta.1 → 3.4.0-beta.10

package/esm/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "width", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -12,10 +12,15 @@ import { AnimatePresence, m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { ReferenceLine } from '../line/ReferenceLine';
-import { SmartChartTextGroup } from '../text/SmartChartTextGroup';
-import { getAxisTicksData, isCategoricalScale } from '../utils';
-import { axisLineStyles, axisTickLabelsInitialAnimationVariants, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AXIS_WIDTH = 44;
+const LABEL_SIZE = 20;
 const axisTickMarkCss = "cds-axisTickMarkCss-au2toz5";
 const axisLineCss = "cds-axisLineCss-akmofp5";
 export const YAxis = /*#__PURE__*/memo(_ref => {
@@ -26,18 +31,24 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount,
       ticks,
       tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
       style,
       className,
       styles,
       classNames,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 8,
-      width = 44,
       minTickLabelGap = 0,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
-      tickInterval
+      tickInterval,
+      label,
+      labelGap = 4,
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
+      testID = 'y-axis'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
@@ -118,65 +129,85 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       };
     });
   }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
-  if (!yScale) return;
+  if (!yScale || !axisBounds) return;
+  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
+  const labelY = axisBounds.y + axisBounds.height / 2;
   return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-axis": "y",
     "data-position": position,
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, props), {}, {
-    children: [showGrid && /*#__PURE__*/_jsx(AnimatePresence, {
-      initial: false,
-      children: ticksData.map((tick, index) => {
-        const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
-          LineComponent: GridLineComponent,
-          dataY: tick.tick,
-          yAxisId: axisId
-        });
-        return animate ? /*#__PURE__*/_jsx(motion.g, {
-          animate: "animate",
-          exit: "exit",
-          initial: "initial",
-          variants: axisUpdateAnimationVariants,
-          children: horizontalLine
-        }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
-          children: horizontalLine
-        }, "grid-".concat(tick.tick, "-").concat(index));
-      })
-    }), chartTextData && /*#__PURE__*/_jsx(AnimatePresence, {
-      children: /*#__PURE__*/_jsx(motion.g, {
-        animate: "animate",
-        exit: "exit",
-        initial: "initial",
-        variants: animate ? axisTickLabelsInitialAnimationVariants : undefined,
-        children: /*#__PURE__*/_jsx(SmartChartTextGroup, {
-          prioritizeEndLabels: true,
-          labels: chartTextData,
-          minGap: minTickLabelGap
+    children: [showGrid && /*#__PURE__*/_jsx("g", {
+      "data-testid": "".concat(testID, "-grid"),
+      children: /*#__PURE__*/_jsx(AnimatePresence, {
+        initial: false,
+        children: ticksData.map((tick, index) => {
+          const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
+            LineComponent: GridLineComponent,
+            dataY: tick.tick,
+            yAxisId: axisId
+          });
+          return animate ? /*#__PURE__*/_jsx(motion.g, {
+            animate: "animate",
+            exit: "exit",
+            initial: "initial",
+            variants: axisUpdateAnimationVariants,
+            children: horizontalLine
+          }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
+            children: horizontalLine
+          }, "grid-".concat(tick.tick, "-").concat(index));
         })
       })
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
-      "data-testid": "tick-marks",
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), showTickMarks && /*#__PURE__*/_jsx("g", {
+      "data-testid": "".concat(testID, "-tick-marks"),
       children: ticksData.map((tick, index) => {
         const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
         const tickMarkSizePixels = tickMarkSize;
         const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
-        return /*#__PURE__*/_jsx("line", {
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
           className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
-          style: styles === null || styles === void 0 ? void 0 : styles.tickMark,
-          x1: tickX,
-          x2: tickX2,
-          y1: tick.position,
-          y2: tick.position
+          clipRect: null,
+          d: lineToPath(tickX, tick.position, tickX2, tick.position),
+          stroke: "var(--color-fg)",
+          strokeLinecap: "square",
+          strokeWidth: 1,
+          style: styles === null || styles === void 0 ? void 0 : styles.tickMark
         }, "tick-mark-".concat(tick.tick, "-").concat(index));
       })
-    }), axisBounds && showLine && /*#__PURE__*/_jsx("line", {
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
       className: cx(axisLineCss, classNames === null || classNames === void 0 ? void 0 : classNames.line),
-      style: styles === null || styles === void 0 ? void 0 : styles.line,
-      x1: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
-      x2: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
-      y1: axisBounds.y,
-      y2: axisBounds.y + axisBounds.height
+      clipRect: null,
+      d: lineToPath(position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y, position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y + axisBounds.height),
+      "data-testid": "".concat(testID, "-line"),
+      stroke: "var(--color-fg)",
+      strokeLinecap: "square",
+      strokeWidth: 1,
+      style: styles === null || styles === void 0 ? void 0 : styles.line
+    }), label && /*#__PURE__*/_jsx("g", {
+      "data-testid": "".concat(testID, "-label"),
+      style: {
+        transformOrigin: "".concat(labelX, "px ").concat(labelY, "px"),
+        transform: "rotate(".concat(position === 'left' ? -90 : 90, "deg)")
+      },
+      children: /*#__PURE__*/_jsx(ChartText, {
+        disableRepositioning: true,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+        horizontalAlignment: "center",
+        style: styles === null || styles === void 0 ? void 0 : styles.label,
+        testID: "".concat(testID, "-label-text"),
+        verticalAlignment: "middle",
+        x: labelX,
+        y: labelY,
+        children: label
+      })
     })]
   }));
 });

package/esm/chart/axis/index.js

@@ -1,5 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './Axis';
+export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';
 // codegen:end

package/esm/chart/bar/Bar.js

@@ -30,7 +30,8 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     strokeWidth,
     borderRadius = 4,
     roundTop = true,
-    roundBottom = true
+    roundBottom = true,
+    transition
   } = _ref;
   const barPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
@@ -52,6 +53,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     roundTop: roundTop,
     stroke: stroke,
     strokeWidth: strokeWidth,
+    transition: transition,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -22,7 +22,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       showYAxis,
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children,
       barPadding,
       BarComponent,
@@ -34,44 +34,26 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BarStackComponent,
       stackGap,
       barMinSize,
-      stackMinSize
+      stackMinSize,
+      transition
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
-
-  // Convert BarSeries to Series for Chart context
-  const chartSeries = useMemo(() => {
-    return series === null || series === void 0 ? void 0 : series.map(s => ({
-      id: s.id,
-      data: s.data,
-      label: s.label,
-      color: s.color,
-      yAxisId: s.yAxisId,
-      stackId: s.stackId
-    }));
-  }, [series]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
   const transformedSeries = useMemo(() => {
-    if (!stacked || !chartSeries) return chartSeries;
-    return chartSeries.map(s => {
-      var _s$stackId;
-      return _objectSpread(_objectSpread({}, s), {}, {
-        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
-      });
-    });
-  }, [chartSeries, stacked]);
-  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : chartSeries;
-
-  // Keep the original series with bar-specific props for BarPlot
-  const barSeriesToRender = useMemo(() => {
     if (!stacked || !series) return series;
     return series.map(s => {
-      var _s$stackId2;
+      var _s$stackId;
       return _objectSpread(_objectSpread({}, s), {}, {
-        stackId: (_s$stackId2 = s.stackId) !== null && _s$stackId2 !== void 0 ? _s$stackId2 : defaultStackId
+        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
       });
     });
   }, [series, stacked]);
 
+  // Unlike other charts with custom props per series, we do not need to pick out
+  // the props from each series that shouldn't be passed to CartesianChart
+  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : series;
+  const seriesIds = seriesToRender === null || seriesToRender === void 0 ? void 0 : seriesToRender.map(s => s.id);
+
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
     {
@@ -137,11 +119,12 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       borderRadius: borderRadius,
       fillOpacity: fillOpacity,
       roundBaseline: roundBaseline,
-      seriesIds: barSeriesToRender === null || barSeriesToRender === void 0 ? void 0 : barSeriesToRender.map(s => s.id),
+      seriesIds: seriesIds,
       stackGap: stackGap,
       stackMinSize: stackMinSize,
       stroke: stroke,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      transition: transition
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -22,7 +22,8 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     BarStackComponent,
     stackGap,
     barMinSize,
-    stackMinSize
+    stackMinSize,
+    transition
   } = _ref;
   const {
     series: allSeries,
@@ -73,7 +74,6 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       })
     }), /*#__PURE__*/_jsx("g", {
       clipPath: "url(#".concat(clipPathId, ")"),
-      "data-testid": "whoa",
       children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
         BarComponent: defaultBarComponent,
         BarStackComponent: BarStackComponent,
@@ -89,6 +89,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
         stroke: defaultStroke,
         strokeWidth: defaultStrokeWidth,
         totalStacks: stackGroups.length,
+        transition: transition,
         yAxisId: group.yAxisId
       }, group.stackId))
     })]

package/esm/chart/bar/BarStack.js

@@ -5,9 +5,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientConfig } from '../utils/gradient';
 import { Bar } from './Bar';
 import { DefaultBarStack } from './DefaultBarStack';
 import { jsx as _jsx } from "react/jsx-runtime";
+const EPSILON = 1e-4;
 /**
  * BarStack component that renders a single stack of bars at a specific category index.
  * Handles the stacking logic for bars within a single category.
@@ -29,13 +31,16 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
-    roundBaseline
+    roundBaseline,
+    transition
   } = _ref;
   const {
     getSeriesData,
-    getXAxis
+    getXAxis,
+    getXScale,
+    getSeries
   } = useCartesianChartContext();
-  const stackGapPx = stackGap;
+  const xScale = getXScale();
   const barMinSizePx = barMinSize;
   const stackMinSizePx = stackMinSize;
   const xAxis = getXAxis();
@@ -47,6 +52,20 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     const baseline = (_yScale = yScale(baselineValue)) !== null && _yScale !== void 0 ? _yScale : rect.y + rect.height;
     return Math.max(rect.y, Math.min(baseline, rect.y + rect.height));
   }, [rect.height, rect.y, yScale]);
+  const seriesGradients = useMemo(() => {
+    return series.map(s => {
+      if (!s.gradient || !xScale || !yScale) return null;
+      const gradientScale = s.gradient.axis === 'x' ? xScale : yScale;
+      const stops = getGradientConfig(s.gradient, xScale, yScale);
+      if (!stops) return null;
+      return {
+        seriesId: s.id,
+        gradient: s.gradient,
+        scale: gradientScale,
+        stops
+      };
+    });
+  }, [series, xScale, yScale]);
 
   // Calculate bars for this specific category
   const {
@@ -65,7 +84,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
     // Process each series in the stack
     series.forEach(s => {
-      var _yScale2, _yScale3;
+      var _yScale2, _yScale3, _s$color;
       const data = getSeriesData(s.id);
       if (!data) return;
       const value = data[categoryIndex];
@@ -103,6 +122,30 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       // Update stack bounds
       minY = Math.min(minY, y);
       maxY = Math.max(maxY, y + height);
+      let barFill = (_s$color = s.color) !== null && _s$color !== void 0 ? _s$color : 'var(--color-fgPrimary)';
+
+      // Evaluate gradient if provided (using precomputed stops)
+      const seriesGradientConfig = seriesGradients.find(g => (g === null || g === void 0 ? void 0 : g.seriesId) === s.id);
+      if (seriesGradientConfig && originalValue !== null && originalValue !== undefined) {
+        var _seriesGradientConfig;
+        const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) !== null && _seriesGradientConfig !== void 0 ? _seriesGradientConfig : 'y';
+        // For x-axis gradient, use the categoryIndex
+        // For y-axis gradient, use the ORIGINAL data value (not the processed top value)
+        // This is important for bar charts where originalValue might be a single number (e.g., -40, 15)
+        // or a tuple (e.g., [0, 10] for range bars)
+        let evalValue;
+        if (axis === 'x') {
+          evalValue = categoryIndex;
+        } else {
+          // Use original value for evaluation - handles both single numbers and tuples
+          evalValue = Array.isArray(originalValue) ? originalValue[1] : originalValue;
+        }
+        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
+        if (evaluatedColor) {
+          // Only apply gradient color if fill is not explicitly set
+          barFill = evaluatedColor;
+        }
+      }
       allBars.push({
         seriesId: s.id,
         x,
@@ -111,21 +154,16 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         height,
         dataY: value,
         // Store the actual data value
-        // Use series-specific properties, falling back to defaults
-        BarComponent: s.BarComponent,
-        fill: s.fill || s.color || 'var(--color-fgPrimary)',
-        fillOpacity: s.fillOpacity,
-        stroke: s.stroke,
-        strokeWidth: s.strokeWidth,
-        // Pass context data for custom components
-        roundTop: roundBaseline || barTop !== baseline,
-        roundBottom: roundBaseline || barBottom !== baseline,
+        fill: barFill,
+        // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+        roundTop: roundBaseline || Math.abs(barTop - baseline) >= EPSILON,
+        roundBottom: roundBaseline || Math.abs(barBottom - baseline) >= EPSILON,
         shouldApplyGap
       });
     });
 
     // Apply proportional gap distribution to maintain total stack height
-    if (stackGapPx && allBars.length > 1) {
+    if (stackGap && allBars.length > 1) {
       // Separate bars by baseline side
       const barsAboveBaseline = allBars.filter(bar => {
         const [bottom, top] = bar.dataY.sort((a, b) => a - b);
@@ -138,7 +176,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
       // Apply proportional gaps to bars above baseline
       if (barsAboveBaseline.length > 1) {
-        const totalGapSpace = stackGapPx * (barsAboveBaseline.length - 1);
+        const totalGapSpace = stackGap * (barsAboveBaseline.length - 1);
         const totalDataHeight = barsAboveBaseline.reduce((sum, bar) => sum + bar.height, 0);
         const heightReduction = totalGapSpace / totalDataHeight;
 
@@ -160,13 +198,13 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
           }
 
           // Move to next position (include gap for next bar)
-          currentY = newY - (index < sortedBars.length - 1 ? stackGapPx : 0);
+          currentY = newY - (index < sortedBars.length - 1 ? stackGap : 0);
         });
       }
 
       // Apply proportional gaps to bars below baseline
       if (barsBelowBaseline.length > 1) {
-        const totalGapSpace = stackGapPx * (barsBelowBaseline.length - 1);
+        const totalGapSpace = stackGap * (barsBelowBaseline.length - 1);
         const totalDataHeight = barsBelowBaseline.reduce((sum, bar) => sum + bar.height, 0);
         const heightReduction = totalGapSpace / totalDataHeight;
 
@@ -187,7 +225,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
           }
 
           // Move to next position (include gap for next bar)
-          currentY = currentY + newHeight + (index < sortedBars.length - 1 ? stackGapPx : 0);
+          currentY = currentY + newHeight + (index < sortedBars.length - 1 ? stackGap : 0);
         });
       }
 
@@ -323,8 +361,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       return bars.sort((a, b) => b.y - a.y).map((a, index) => {
         const barBefore = index > 0 ? bars[index - 1] : null;
         const barAfter = index < bars.length - 1 ? bars[index + 1] : null;
-        const shouldRoundTop = index === bars.length - 1 || a.shouldApplyGap && stackGapPx || !a.shouldApplyGap && barAfter && barAfter.y + barAfter.height !== a.y;
-        const shouldRoundBottom = index === 0 || a.shouldApplyGap && stackGapPx || !a.shouldApplyGap && barBefore && barBefore.y !== a.y + a.height;
+        const shouldRoundTop = index === bars.length - 1 || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barAfter && barAfter.y + barAfter.height !== a.y;
+        const shouldRoundBottom = index === 0 || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barBefore && barBefore.y !== a.y + a.height;
         return _objectSpread(_objectSpread({}, a), {}, {
           roundTop: Boolean(a.roundTop && shouldRoundTop),
           roundBottom: Boolean(a.roundBottom && shouldRoundBottom)
@@ -479,7 +517,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       bars: allBars,
       stackRect: stackBounds
     };
-  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGapPx, barMinSizePx, stackMinSizePx, yScale]);
+  }, [series, stackGap, barMinSizePx, x, baseline, width, stackMinSizePx, getSeriesData, categoryIndex, yScale, seriesGradients, roundBaseline]);
   const xData = xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
   const dataX = xData ? xData[categoryIndex] : categoryIndex;
   const barElements = bars.map((bar, index) => {
@@ -497,19 +535,23 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       roundTop: bar.roundTop,
       stroke: (_bar$stroke = bar.stroke) !== null && _bar$stroke !== void 0 ? _bar$stroke : defaultStroke,
       strokeWidth: (_bar$strokeWidth = bar.strokeWidth) !== null && _bar$strokeWidth !== void 0 ? _bar$strokeWidth : defaultStrokeWidth,
+      transition: transition,
       width: bar.width,
       x: bar.x,
       y: bar.y
     }, "".concat(bar.seriesId, "-").concat(categoryIndex, "-").concat(index));
   });
-  const stackRoundBottom = roundBaseline || stackRect.y + stackRect.height !== baseline;
-  const stackRoundTop = roundBaseline || stackRect.y !== baseline;
+
+  // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+  const stackRoundBottom = roundBaseline || Math.abs(stackRect.y + stackRect.height - baseline) >= EPSILON;
+  const stackRoundTop = roundBaseline || Math.abs(stackRect.y - baseline) >= EPSILON;
   return /*#__PURE__*/_jsx(BarStackComponent, {
     borderRadius: borderRadius,
     categoryIndex: categoryIndex,
     height: stackRect.height,
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
+    transition: transition,
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,

package/esm/chart/bar/BarStackGroup.js

@@ -25,26 +25,15 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
-    getSeriesData,
     getXScale,
     getYScale,
-    drawingArea
+    drawingArea,
+    dataLength
   } = useCartesianChartContext();
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
-  const maxDataLength = useMemo(() => {
-    if (!series || series.length === 0) return 0;
-    let maxLength = 0;
-    series.forEach(s => {
-      const data = getSeriesData(s.id);
-      if (data && data.length > maxLength) {
-        maxLength = data.length;
-      }
-    });
-    return maxLength;
-  }, [series, getSeriesData]);
   const stackConfigs = useMemo(() => {
-    if (!xScale || !yScale || !drawingArea || maxDataLength === 0) return [];
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
     if (!isCategoricalScale(xScale)) {
       return [];
     }
@@ -57,7 +46,8 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     const configs = [];
 
     // Calculate position for each category
-    for (let categoryIndex = 0; categoryIndex < maxDataLength; categoryIndex++) {
+    // todo: look at using xDomain for this instead of dataLength
+    for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
       // Get x position for this category
       const categoryX = xScale(categoryIndex);
       if (categoryX !== undefined) {
@@ -71,11 +61,11 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
       }
     }
     return configs;
-  }, [xScale, yScale, drawingArea, maxDataLength, stackIndex, totalStacks, barPadding]);
+  }, [xScale, yScale, drawingArea, dataLength, stackIndex, totalStacks, barPadding]);
   if (xScale && !isCategoricalScale(xScale)) {
     throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/graphs/XAxis/#scale-type');
   }
-  if (!yScale || !drawingArea || stackConfigs.length === 0) return;
+  if (!yScale || !drawingArea || stackConfigs.length === 0) return null;
   return stackConfigs.map(_ref2 => {
     let {
       categoryIndex,

package/esm/chart/bar/DefaultBar.js

@@ -1,4 +1,4 @@
-const _excluded = ["x", "width", "borderRadius", "roundTop", "roundBottom", "originY", "d", "fill", "fillOpacity", "dataX", "dataY"];
+const _excluded = ["x", "width", "borderRadius", "roundTop", "roundBottom", "originY", "d", "fill", "fillOpacity", "dataX", "dataY", "transition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -26,7 +26,8 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
       dataX,
-      dataY
+      dataY,
+      transition
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -49,11 +50,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       initial: {
         d: initialPath
       },
-      transition: {
-        type: 'spring',
-        duration: 1,
-        bounce: 0
-      }
+      transition: transition
     }));
   }
   return /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({}, props), {}, {

package/esm/chart/bar/DefaultBarStack.js

@@ -18,7 +18,8 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin
+    yOrigin,
+    transition
   } = _ref;
   const {
     animate
@@ -28,8 +29,9 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
   const initialClipPathData = useMemo(() => {
+    if (!animate) return undefined;
     return getBarPath(x, yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height, width, 1, borderRadius, roundTop, roundBottom);
-  }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+  }, [animate, x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
@@ -41,11 +43,7 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
           initial: {
             d: initialClipPathData
           },
-          transition: {
-            type: 'spring',
-            duration: 1,
-            bounce: 0
-          }
+          transition: transition
         }) : /*#__PURE__*/_jsx("path", {
           d: clipPathData
         })