@coinbase/cds-mobile-visualization 3.4.0-beta.22 → 3.4.0-beta.24

package/esm/chart/bar/Bar.js

@@ -1,5 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
 import { DefaultBar } from './DefaultBar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,7 +22,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    originY,
+    origin: originProp,
     dataX,
     dataY,
     seriesId,
@@ -37,14 +38,17 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     transition
   } = _ref;
   const theme = useTheme();
+  const {
+    layout
+  } = useCartesianChartContext();
 
   // Use theme color as default if no fill is provided
   const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
   const borderRadiusPixels = useMemo(() => borderRadius != null ? borderRadius : 0, [borderRadius]);
   const barPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadiusPixels, roundTop, roundBottom);
-  }, [x, y, width, height, borderRadiusPixels, roundTop, roundBottom]);
-  const effectiveOriginY = originY != null ? originY : y + height;
+    return getBarPath(x, y, width, height, borderRadiusPixels, roundTop, roundBottom, layout);
+  }, [x, y, width, height, borderRadiusPixels, roundTop, roundBottom, layout]);
+  const effectiveOrigin = originProp != null ? originProp : layout === 'horizontal' ? x : y + height;
   if (!barPath) {
     return null;
   }
@@ -58,7 +62,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     fill: effectiveFill,
     fillOpacity: fillOpacity,
     height: height,
-    originY: effectiveOriginY,
+    origin: effectiveOrigin,
     roundBottom: roundBottom,
     roundTop: roundTop,
     seriesId: seriesId,

package/esm/chart/bar/BarChart.js

@@ -1,17 +1,17 @@
 const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 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 { forwardRef, memo, useMemo } from 'react';
 import { XAxis, YAxis } from '../axis';
 import { CartesianChart } from '../CartesianChart';
-import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { defaultStackId } from '../utils';
 import { BarPlot } from './BarPlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      series,
+      series: seriesProp,
       stacked,
       showXAxis,
       showYAxis,
@@ -34,21 +34,19 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       transition
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-  const transformedSeries = useMemo(() => {
-    if (!stacked || !series) return series;
-    return series.map(s => {
+  const series = useMemo(() => {
+    if (!stacked || !seriesProp) return seriesProp;
+    return seriesProp.map(s => {
       var _s$stackId;
       return _extends({}, s, {
         stackId: (_s$stackId = s.stackId) != null ? _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 : series;
-  const seriesIds = seriesToRender == null ? void 0 : seriesToRender.map(s => s.id);
+  }, [seriesProp, stacked]);
+  const seriesIds = useMemo(() => series == null ? void 0 : series.map(s => s.id), [series]);
+  const isHorizontal = chartProps.layout === 'horizontal';
+  const defaultXScaleType = isHorizontal ? 'linear' : 'band';
+  const defaultYScaleType = isHorizontal ? 'band' : 'linear';
 
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
@@ -58,7 +56,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       categoryPadding: xCategoryPadding,
       domain: xDomain,
       domainLimit: xDomainLimit,
-      range: xRange
+      range: xRange,
+      id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const _ref3 = yAxis || {},
@@ -72,14 +71,6 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  const xAxisConfig = {
-    scaleType: xScaleType != null ? xScaleType : 'band',
-    data: xData,
-    categoryPadding: xCategoryPadding,
-    domain: xDomain,
-    domainLimit: xDomainLimit,
-    range: xRange
-  };
   const hasNegativeValues = useMemo(() => {
     if (!series) return false;
     return series.some(s => {
@@ -87,25 +78,37 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       return (_s$data = s.data) == null ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
     });
   }, [series]);
+  const xAxisConfig = useMemo(() => ({
+    scaleType: xScaleType != null ? xScaleType : defaultXScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: isHorizontal && !hasNegativeValues ? _extends({
+      min: 0
+    }, xDomain) : xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontal, hasNegativeValues, xDomain, xDomainLimit, xRange]);
 
-  // Set default min domain to 0 for area chart, but only if there are no negative values
-  const yAxisConfig = {
-    scaleType: yScaleType,
+  // Set default min domain to 0 for bar chart, but only if there are no negative values.
+  const yAxisConfig = useMemo(() => ({
+    scaleType: yScaleType != null ? yScaleType : defaultYScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: hasNegativeValues ? yDomain : _extends({
+    domain: !isHorizontal && !hasNegativeValues ? _extends({
       min: 0
-    }, yDomain),
+    }, yDomain) : yDomain,
     domainLimit: yDomainLimit,
     range: yRange
-  };
+  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontal, hasNegativeValues, yDomain, yDomainLimit, yRange]);
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
-    inset: calculatedInset,
-    series: seriesToRender,
+    inset: inset,
+    series: series,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
       axisId: yAxisId
     }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
       BarComponent: BarComponent,

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
     }));
   });
 });