@coinbase/cds-mobile-visualization 3.4.0-beta.21 → 3.4.0-beta.23

package/esm/chart/bar/BarPlot.js

@@ -1,4 +1,4 @@
-import { memo, useId, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Group, Skia } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { defaultAxisId } from '../utils';
@@ -31,7 +31,6 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     series: allSeries,
     drawingArea
   } = useCartesianChartContext();
-  const clipPathId = useId();
   const targetSeries = useMemo(() => {
     // Then filter by seriesIds if provided
     if (seriesIds !== undefined) {
@@ -42,16 +41,18 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
   const stackGroups = useMemo(() => {
     const groups = new Map();
 
-    // Group series into stacks based on stackId + yAxisId combination
+    // Group series into stacks based on stackId + axis ID combination
     targetSeries.forEach(series => {
-      var _series$yAxisId;
+      var _series$xAxisId, _series$yAxisId;
+      const xAxisId = (_series$xAxisId = series.xAxisId) != null ? _series$xAxisId : defaultAxisId;
       const yAxisId = (_series$yAxisId = series.yAxisId) != null ? _series$yAxisId : defaultAxisId;
       const stackId = series.stackId || "individual-" + series.id;
-      const stackKey = stackId + ":" + yAxisId;
+      const stackKey = stackId + ":" + xAxisId + ":" + yAxisId;
       if (!groups.has(stackKey)) {
         groups.set(stackKey, {
           stackId: stackKey,
           series: [],
+          xAxisId: series.xAxisId,
           yAxisId: series.yAxisId
         });
       }
@@ -98,6 +99,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       totalStacks: stackGroups.length,
       transition: transition,
       transitions: transitions,
+      xAxisId: group.xAxisId,
       yAxisId: group.yAxisId
     }, group.stackId))
   });

package/esm/chart/bar/BarStack.js

@@ -21,10 +21,13 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
   let {
     series,
     categoryIndex,
-    x,
-    width,
-    yScale,
+    indexPos,
+    thickness,
+    indexScale,
+    valueScale,
     rect,
+    xAxisId,
+    yAxisId,
     BarComponent: defaultBarComponent,
     fillOpacity: defaultFillOpacity,
     stroke: defaultStroke,
@@ -40,24 +43,30 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
   } = _ref;
   const theme = useTheme();
   const {
+    layout,
     getSeriesData,
     getXAxis,
-    getXScale
+    getYAxis
   } = useCartesianChartContext();
-  const xAxis = getXAxis();
-  const xScale = getXScale();
+  const xAxis = getXAxis(xAxisId);
+  const yAxis = getYAxis(yAxisId);
+  const barsGrowVertically = layout !== 'horizontal';
   const baseline = useMemo(() => {
-    var _yScale;
-    const domain = yScale.domain();
+    var _valueScale;
+    const domain = valueScale.domain();
     const [domainMin, domainMax] = domain;
     const baselineValue = domainMin >= 0 ? domainMin : domainMax <= 0 ? domainMax : 0;
-    const baseline = (_yScale = yScale(baselineValue)) != null ? _yScale : rect.y + rect.height;
-    return Math.max(rect.y, Math.min(baseline, rect.y + rect.height));
-  }, [rect.height, rect.y, yScale]);
+    const fallback = barsGrowVertically ? rect.y + rect.height : rect.x;
+    const baselinePos = (_valueScale = valueScale(baselineValue)) != null ? _valueScale : fallback;
+    if (barsGrowVertically) {
+      return Math.max(rect.y, Math.min(baselinePos, rect.y + rect.height));
+    }
+    return Math.max(rect.x, Math.min(baselinePos, rect.x + rect.width));
+  }, [rect, valueScale, barsGrowVertically]);
   const seriesGradients = useMemo(() => {
     return series.map(s => {
-      if (!s.gradient || !xScale || !yScale) return;
-      const gradientScale = s.gradient.axis === 'x' ? xScale : yScale;
+      if (!s.gradient) return;
+      const gradientScale = s.gradient.axis === 'x' ? barsGrowVertically ? indexScale : valueScale : barsGrowVertically ? valueScale : indexScale;
       const serializableScale = convertToSerializableScale(gradientScale);
       if (!serializableScale) return;
       const domain = {
@@ -72,14 +81,140 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         stops
       };
     });
-  }, [series, xScale, yScale]);
+  }, [series, indexScale, valueScale, barsGrowVertically]);
 
   // Calculate bars for this specific category
   const {
     bars,
     stackRect
   } = useMemo(() => {
+    const x = indexPos;
+    const width = thickness;
+    const yScale = valueScale;
     let allBars = [];
+    if (!barsGrowVertically) {
+      let minX = Infinity;
+      let maxX = -Infinity;
+      series.forEach(s => {
+        var _yScale, _yScale2;
+        const data = getSeriesData(s.id);
+        if (!data) return;
+        const value = data[categoryIndex];
+        if (value === null || value === undefined) return;
+        const originalData = s.data;
+        const originalValue = originalData == null ? void 0 : originalData[categoryIndex];
+        const shouldApplyGap = !Array.isArray(originalValue);
+        const [bottom, top] = value.sort((a, b) => a - b);
+        const edgeBottom = (_yScale = yScale(bottom)) != null ? _yScale : baseline;
+        const edgeTop = (_yScale2 = yScale(top)) != null ? _yScale2 : baseline;
+        const length = Math.abs(edgeBottom - edgeTop);
+        const barX = Math.min(edgeBottom, edgeTop);
+        if (length <= 0) return;
+        minX = Math.min(minX, barX);
+        maxX = Math.max(maxX, barX + length);
+        let barFill = s.color || theme.color.fgPrimary;
+        const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
+        if (seriesGradientConfig && originalValue !== null && originalValue !== undefined) {
+          var _seriesGradientConfig;
+          const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig : 'y';
+          const evalValue = axis === 'x' ? Array.isArray(originalValue) ? originalValue[1] : originalValue : categoryIndex;
+          const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
+          if (evaluatedColor) {
+            barFill = evaluatedColor;
+          }
+        }
+        const roundTop = roundBaseline || Math.abs(edgeTop - baseline) >= EPSILON;
+        const roundBottom = roundBaseline || Math.abs(edgeBottom - baseline) >= EPSILON;
+        allBars.push({
+          seriesId: s.id,
+          x: barX,
+          y: x,
+          width: length,
+          height: width,
+          dataY: value,
+          fill: barFill,
+          roundTop,
+          roundBottom,
+          BarComponent: s.BarComponent,
+          shouldApplyGap
+        });
+      });
+      if (stackGap && allBars.length > 1) {
+        const barsAboveBaseline = allBars.filter(bar => {
+          const [bottom, top] = bar.dataY.sort((a, b) => a - b);
+          return bottom >= 0 && top !== bottom && bar.shouldApplyGap;
+        });
+        const barsBelowBaseline = allBars.filter(bar => {
+          const [bottom, top] = bar.dataY.sort((a, b) => a - b);
+          return bottom <= 0 && bottom !== top && bar.shouldApplyGap;
+        });
+        if (barsAboveBaseline.length > 1) {
+          const totalGapSpace = stackGap * (barsAboveBaseline.length - 1);
+          const totalDataLength = barsAboveBaseline.reduce((sum, bar) => sum + bar.width, 0);
+          const lengthReduction = totalGapSpace / totalDataLength;
+          const sortedBars = barsAboveBaseline.sort((a, b) => a.x - b.x);
+          let currentEdge = baseline;
+          sortedBars.forEach((bar, index) => {
+            const newLength = bar.width * (1 - lengthReduction);
+            const newX = currentEdge;
+            currentEdge = newX + newLength + (index < sortedBars.length - 1 ? stackGap : 0);
+            const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
+            if (barIndex !== -1) {
+              allBars[barIndex] = _extends({}, allBars[barIndex], {
+                width: newLength,
+                x: newX
+              });
+            }
+          });
+        }
+        if (barsBelowBaseline.length > 1) {
+          const totalGapSpace = stackGap * (barsBelowBaseline.length - 1);
+          const totalDataLength = barsBelowBaseline.reduce((sum, bar) => sum + bar.width, 0);
+          const lengthReduction = totalGapSpace / totalDataLength;
+          const sortedBars = barsBelowBaseline.sort((a, b) => b.x - a.x);
+          let currentEdge = baseline;
+          sortedBars.forEach((bar, index) => {
+            const newLength = bar.width * (1 - lengthReduction);
+            const newX = currentEdge - newLength;
+            currentEdge = newX - (index < sortedBars.length - 1 ? stackGap : 0);
+            const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
+            if (barIndex !== -1) {
+              allBars[barIndex] = _extends({}, allBars[barIndex], {
+                width: newLength,
+                x: newX
+              });
+            }
+          });
+        }
+        if (allBars.length > 0) {
+          minX = Math.min(...allBars.map(bar => bar.x));
+          maxX = Math.max(...allBars.map(bar => bar.x + bar.width));
+        }
+      }
+
+      // Horizontal border radius logic: left-to-right sorting.
+      const sortedBars = [...allBars].sort((a, b) => a.x - b.x);
+      const roundedBars = sortedBars.map((bar, index) => {
+        const barBefore = index > 0 ? sortedBars[index - 1] : null;
+        const barAfter = index < sortedBars.length - 1 ? sortedBars[index + 1] : null;
+        const shouldRoundLower = index === 0 || bar.shouldApplyGap && stackGap || !bar.shouldApplyGap && barAfter && barAfter.x + barAfter.width !== bar.x;
+        const shouldRoundHigher = index === sortedBars.length - 1 || bar.shouldApplyGap && stackGap || !bar.shouldApplyGap && barBefore && barBefore.x !== bar.x + bar.width;
+        return _extends({}, bar, {
+          roundTop: Boolean(bar.roundTop && shouldRoundHigher),
+          roundBottom: Boolean(bar.roundBottom && shouldRoundLower)
+        });
+      });
+      const stackBounds = {
+        x: minX === Infinity ? baseline : minX,
+        y: x,
+        width: maxX === -Infinity ? 0 : maxX - minX,
+        height: width
+      };
+      return {
+        bars: roundedBars,
+        stackRect: stackBounds
+      };
+    }
 
     // Track how many bars we've stacked in each direction for gap calculation
     let positiveBarCount = 0;
@@ -91,7 +226,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
     // Process each series in the stack
     series.forEach(s => {
-      var _yScale2, _yScale3;
+      var _yScale3, _yScale4;
       const data = getSeriesData(s.id);
       if (!data) return;
       const value = data[categoryIndex];
@@ -105,8 +240,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       const [bottom, top] = value.sort((a, b) => a - b);
       const isAboveBaseline = bottom >= 0 && top !== bottom;
       const isBelowBaseline = bottom <= 0 && bottom !== top;
-      const barBottom = (_yScale2 = yScale(bottom)) != null ? _yScale2 : baseline;
-      const barTop = (_yScale3 = yScale(top)) != null ? _yScale3 : baseline;
+      const barBottom = (_yScale3 = yScale(bottom)) != null ? _yScale3 : baseline;
+      const barTop = (_yScale4 = yScale(top)) != null ? _yScale4 : baseline;
 
       // Track bar counts for later gap calculations
       if (shouldApplyGap) {
@@ -136,8 +271,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       // Evaluate gradient if provided (using precomputed stops)
       const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
       if (seriesGradientConfig) {
-        var _seriesGradientConfig;
-        const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig : 'y';
+        var _seriesGradientConfig2;
+        const axis = (_seriesGradientConfig2 = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig2 : 'y';
         // For x-axis gradient, use the categoryIndex
         // For y-axis gradient, use the actual data value
         const dataValue = axis === 'x' ? categoryIndex : top;
@@ -243,14 +378,14 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       // First, expand bars that need it and track the expansion
       const expandedBars = allBars.map((bar, index) => {
         if (bar.height < barMinSize) {
-          var _yScale4, _yScale5, _yScale6, _yScale7;
+          var _yScale5, _yScale6, _yScale7, _yScale8;
           const heightIncrease = barMinSize - bar.height;
           const [bottom, top] = bar.dataY.sort((a, b) => a - b);
 
           // Determine how to expand the bar
           let newBottom = bottom;
           let newTop = top;
-          const scaleUnit = Math.abs(((_yScale4 = yScale(1)) != null ? _yScale4 : 0) - ((_yScale5 = yScale(0)) != null ? _yScale5 : 0));
+          const scaleUnit = Math.abs(((_yScale5 = yScale(1)) != null ? _yScale5 : 0) - ((_yScale6 = yScale(0)) != null ? _yScale6 : 0));
           if (bottom === 0) {
             // Expand away from baseline (upward for positive)
             newTop = top + heightIncrease / scaleUnit;
@@ -265,8 +400,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
           }
 
           // Recalculate bar position with new data values
-          const newBarBottom = (_yScale6 = yScale(newBottom)) != null ? _yScale6 : baseline;
-          const newBarTop = (_yScale7 = yScale(newTop)) != null ? _yScale7 : baseline;
+          const newBarBottom = (_yScale7 = yScale(newBottom)) != null ? _yScale7 : baseline;
+          const newBarTop = (_yScale8 = yScale(newTop)) != null ? _yScale8 : baseline;
           const newHeight = Math.abs(newBarBottom - newBarTop);
           const newY = Math.min(newBarBottom, newBarTop);
           return _extends({}, bar, {
@@ -383,7 +518,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     // Apply stackMinSize constraints
     if (stackMinSize) {
       if (allBars.length === 1 && stackBounds.height < stackMinSize) {
-        var _yScale8, _yScale9, _yScale0, _yScale1;
+        var _yScale9, _yScale0, _yScale1, _yScale10;
         // For single bars (non-stacked), treat stackMinSize like barMinSize
 
         const bar = allBars[0];
@@ -393,7 +528,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         // Determine how to expand the bar (same logic as barMinSize)
         let newBottom = bottom;
         let newTop = top;
-        const scaleUnit = Math.abs(((_yScale8 = yScale(1)) != null ? _yScale8 : 0) - ((_yScale9 = yScale(0)) != null ? _yScale9 : 0));
+        const scaleUnit = Math.abs(((_yScale9 = yScale(1)) != null ? _yScale9 : 0) - ((_yScale0 = yScale(0)) != null ? _yScale0 : 0));
         if (bottom === 0) {
           // Expand away from baseline (upward for positive)
           newTop = top + heightIncrease / scaleUnit;
@@ -408,8 +543,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         }
 
         // Recalculate bar position with new data values
-        const newBarBottom = (_yScale0 = yScale(newBottom)) != null ? _yScale0 : baseline;
-        const newBarTop = (_yScale1 = yScale(newTop)) != null ? _yScale1 : baseline;
+        const newBarBottom = (_yScale1 = yScale(newBottom)) != null ? _yScale1 : baseline;
+        const newBarTop = (_yScale10 = yScale(newTop)) != null ? _yScale10 : baseline;
         const newHeight = Math.abs(newBarBottom - newBarTop);
         const newY = Math.min(newBarBottom, newBarTop);
         allBars[0] = _extends({}, bar, {
@@ -517,18 +652,19 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       bars: allBars,
       stackRect: stackBounds
     };
-  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, yScale, seriesGradients, theme.color.fgPrimary]);
-  const xData = xAxis != null && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
-  const dataX = xData ? xData[categoryIndex] : categoryIndex;
+  }, [series, indexPos, thickness, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, valueScale, seriesGradients, theme.color.fgPrimary, barsGrowVertically]);
+  const categoryAxis = barsGrowVertically ? xAxis : yAxis;
+  const categoryData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
+  const categoryValue = categoryData ? categoryData[categoryIndex] : categoryIndex;
   const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
     BarComponent: bar.BarComponent || defaultBarComponent,
     borderRadius: borderRadius,
-    dataX: dataX,
-    dataY: bar.dataY,
+    dataX: barsGrowVertically ? categoryValue : bar.dataY,
+    dataY: barsGrowVertically ? bar.dataY : categoryValue,
     fill: bar.fill,
     fillOpacity: defaultFillOpacity,
     height: bar.height,
-    originY: baseline,
+    origin: baseline,
     roundBottom: bar.roundBottom,
     roundTop: bar.roundTop,
     seriesId: bar.seriesId,
@@ -541,9 +677,13 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     y: bar.y
   }, bar.seriesId + "-" + categoryIndex + "-" + index));
 
-  // 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;
+  // Check if the stack should be rounded based on baseline, across both orientations.
+  const edge = barsGrowVertically ? stackRect.y : stackRect.x;
+  const size = barsGrowVertically ? stackRect.height : stackRect.width;
+  const stackRoundLower = roundBaseline || Math.abs(edge - baseline) >= EPSILON;
+  const stackRoundHigher = roundBaseline || Math.abs(edge + size - baseline) >= EPSILON;
+  const stackRoundTop = barsGrowVertically ? stackRoundLower : stackRoundHigher;
+  const stackRoundBottom = barsGrowVertically ? stackRoundHigher : stackRoundLower;
   return /*#__PURE__*/_jsx(BarStackComponent, {
     borderRadius: borderRadius,
     categoryIndex: categoryIndex,

package/esm/chart/bar/BarStackGroup.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
+const _excluded = ["series", "xAxisId", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo, createElement as _createElement } from 'react';
@@ -12,6 +12,7 @@ import { BarStack } from './BarStack';
 export const BarStackGroup = /*#__PURE__*/memo(_ref => {
   let {
       series,
+      xAxisId = defaultAxisId,
       yAxisId = defaultAxisId,
       stackIndex,
       totalStacks,
@@ -19,61 +20,70 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
+    layout,
     getXScale,
     getYScale,
     drawingArea,
     dataLength
   } = useCartesianChartContext();
-  const xScale = getXScale();
+  const xScale = getXScale(xAxisId);
   const yScale = getYScale(yAxisId);
   const stackConfigs = useMemo(() => {
     if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
-    if (!isCategoricalScale(xScale)) {
+    const indexScale = layout !== 'horizontal' ? xScale : yScale;
+    if (!isCategoricalScale(indexScale)) {
       return [];
     }
-    const categoryWidth = xScale.bandwidth();
+    const categoryWidth = indexScale.bandwidth();
 
-    // Calculate width for each stack within a category
-    // Only apply barPadding when there are multiple stacks
-    const gapWidth = totalStacks > 1 ? categoryWidth * barPadding / (totalStacks - 1) : 0;
-    const barWidth = categoryWidth / totalStacks - getBarSizeAdjustment(totalStacks, gapWidth);
+    // Calculate thickness for each stack within a category.
+    const gapSize = totalStacks > 1 ? categoryWidth * barPadding / (totalStacks - 1) : 0;
+    const stackThickness = categoryWidth / totalStacks - getBarSizeAdjustment(totalStacks, gapSize);
     const configs = [];
 
-    // Calculate position for each category
-    // todo: look at using xDomain for this instead of dataLength
+    // Calculate position for each category.
     for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
-      // Get x position for this category
-      const categoryX = xScale(categoryIndex);
-      if (categoryX !== undefined) {
-        // Calculate x position for this specific stack within the category
-        const stackX = categoryX + stackIndex * (barWidth + gapWidth);
+      // Get position for this category along the index axis.
+      const categoryPos = indexScale(categoryIndex);
+      if (categoryPos !== undefined) {
+        // Calculate position for this specific stack within the category.
+        const stackPos = categoryPos + stackIndex * (stackThickness + gapSize);
         configs.push({
           categoryIndex,
-          x: stackX,
-          width: barWidth
+          indexPos: stackPos,
+          thickness: stackThickness
         });
       }
     }
     return configs;
-  }, [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/charts/XAxis/#scale-type');
+  }, [xScale, yScale, drawingArea, dataLength, layout, totalStacks, barPadding, stackIndex]);
+  const indexScaleComputed = layout !== 'horizontal' ? xScale : yScale;
+  const valueScaleComputed = layout !== 'horizontal' ? yScale : xScale;
+  if (indexScaleComputed && !isCategoricalScale(indexScaleComputed)) {
+    throw new Error("BarStackGroup requires a band scale for " + (layout !== 'horizontal' ? 'x-axis' : 'y-axis') + ". See https://cds.coinbase.com/components/charts/" + (layout !== 'horizontal' ? 'XAxis' : 'YAxis') + "/#scale-type");
   }
-  if (!yScale || !drawingArea || stackConfigs.length === 0) return;
-  return stackConfigs.map(_ref2 => {
+  if (!indexScaleComputed || !valueScaleComputed || !drawingArea || stackConfigs.length === 0) return;
+
+  // In horizontal layout, render stacks in reverse order so top rows (lower categoryIndex)
+  // appear on top. Otherwise bottom rows would overlap and obscure top rows during animation.
+  const orderedConfigs = layout === 'horizontal' ? [...stackConfigs].reverse() : stackConfigs;
+  return orderedConfigs.map(_ref2 => {
     let {
       categoryIndex,
-      x,
-      width
+      indexPos,
+      thickness
     } = _ref2;
     return /*#__PURE__*/_createElement(BarStack, _extends({}, props, {
       key: "stack-" + stackIndex + "-category-" + categoryIndex,
       categoryIndex: categoryIndex,
+      indexPos: indexPos,
+      indexScale: indexScaleComputed,
       rect: drawingArea,
       series: series,
-      width: width,
-      x: x,
-      yScale: yScale
+      thickness: thickness,
+      valueScale: valueScaleComputed,
+      xAxisId: xAxisId,
+      yAxisId: yAxisId
     }));
   });
 });

package/esm/chart/bar/DefaultBar.js

@@ -22,23 +22,39 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     fillOpacity = 1,
     stroke,
     strokeWidth,
-    originY,
+    origin,
     transitions,
     transition
   } = _ref;
   const {
     animate,
-    drawingArea
+    drawingArea,
+    layout
   } = useCartesianChartContext();
   const theme = useTheme();
   const defaultFill = fill || theme.color.fgPrimary;
-  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
-  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [transitions == null ? void 0 : transitions.enter, animate, normalizedX]);
-  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedX]);
+
+  // For vertical layout, stagger by x (category axis). For horizontal, stagger by y (category axis).
+  const normalizedStagger = useMemo(() => {
+    const barsGrowVertically = layout !== 'horizontal';
+    if (barsGrowVertically) {
+      return drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0;
+    }
+    return drawingArea.height > 0 ? (y - drawingArea.y) / drawingArea.height : 0;
+  }, [layout, x, y, drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [transitions == null ? void 0 : transitions.enter, animate, normalizedStagger]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedStagger]);
   const initialPath = useMemo(() => {
-    const baselineY = originY != null ? originY : y + height;
-    return getBarPath(x, baselineY, width, 1, borderRadius, !!roundTop, !!roundBottom);
-  }, [x, originY, y, height, width, borderRadius, roundTop, roundBottom]);
+    if (!animate) return undefined;
+    const minSize = 1;
+    const barsGrowVertically = layout !== 'horizontal';
+    const baseline = origin != null ? origin : barsGrowVertically ? y + height : x;
+    const initialX = barsGrowVertically ? x : baseline;
+    const initialY = barsGrowVertically ? baseline : y;
+    const initialWidth = barsGrowVertically ? width : minSize;
+    const initialHeight = barsGrowVertically ? minSize : height;
+    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, !!roundTop, !!roundBottom, layout);
+  }, [animate, layout, x, y, origin, width, height, borderRadius, roundTop, roundBottom]);
   return /*#__PURE__*/_jsx(Path, {
     animate: animate,
     clipPath: null,

package/esm/chart/bar/DefaultBarStack.js

@@ -24,24 +24,38 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
   } = _ref;
   const {
     animate,
-    drawingArea
+    drawingArea,
+    layout
   } = useCartesianChartContext();
 
-  // Compute normalized x position for stagger delay calculation
-  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
-  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [animate, transitions == null ? void 0 : transitions.enter, normalizedX]);
-  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedX]);
+  // For vertical layout, stagger by x (category axis). For horizontal, stagger by y (category axis).
+  const normalizedStagger = useMemo(() => {
+    const barsGrowVertically = layout !== 'horizontal';
+    if (barsGrowVertically) {
+      return drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0;
+    }
+    return drawingArea.height > 0 ? (y - drawingArea.y) / drawingArea.height : 0;
+  }, [layout, x, y, drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.enter, normalizedStagger]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedStagger]);
 
   // Generate target clip path (full bar)
   const targetPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
-  }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
+    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
 
   // Initial clip path for entry animation (bar at baseline with minimal height)
   const initialPath = useMemo(() => {
-    const baselineY = yOrigin != null ? yOrigin : y + height;
-    return getBarPath(x, baselineY, width, 1, borderRadius, roundTop, roundBottom);
-  }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+    if (!animate) return undefined;
+    const barsGrowVertically = layout !== 'horizontal';
+    const baseline = yOrigin != null ? yOrigin : barsGrowVertically ? y + height : x;
+    const minSize = 1;
+    const initialX = barsGrowVertically ? x : baseline;
+    const initialY = barsGrowVertically ? baseline : y;
+    const initialWidth = barsGrowVertically ? width : minSize;
+    const initialHeight = barsGrowVertically ? minSize : height;
+    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, roundTop, roundBottom, layout);
+  }, [animate, layout, x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
   const animatedClipPath = usePathTransition({
     currentPath: targetPath,
     initialPath,