@coinbase/cds-mobile-visualization 3.6.2 → 3.7.0

package/esm/chart/utils/bar.js

@@ -133,19 +133,20 @@ export function getStackGroups(series, defaultAxisId) {
  * @param bars - Array of bar items with current valuePos and length
  * @param stackGap - Gap size in pixels between adjacent bars
  * @param layout - The layout of the chart
- * @param baseline - Pixel position of the zero value on the value axis
+ * @param baseline - Value-axis baseline in data space
+ * @param baselinePx - Pixel position of the value-axis baseline on the value axis
  * @returns New array of bars with adjusted valuePos and length
  */
-function applyStackGap(bars, stackGap, layout, baseline) {
+function applyStackGap(bars, stackGap, layout, baseline, baselinePx) {
   if (!stackGap || bars.length <= 1) return bars;
   const result = [...bars];
   const barsAboveBaseline = bars.filter(bar => {
     const [bottom, top] = [...bar.dataValue].sort((a, b) => a - b);
-    return bottom >= 0 && top !== bottom && bar.shouldApplyGap;
+    return bottom >= baseline && top !== bottom && bar.shouldApplyGap;
   });
   const barsBelowBaseline = bars.filter(bar => {
     const [bottom, top] = [...bar.dataValue].sort((a, b) => a - b);
-    return top <= 0 && bottom !== top && bar.shouldApplyGap;
+    return top <= baseline && bottom !== top && bar.shouldApplyGap;
   });
   const applyGapGroup = (group, growing) => {
     if (group.length <= 1) return;
@@ -153,7 +154,7 @@ function applyStackGap(bars, stackGap, layout, baseline) {
     const totalDataLength = group.reduce((sum, bar) => sum + bar.length, 0);
     const lengthReduction = totalGapSpace / totalDataLength;
     const sortedBars = growing ? [...group].sort((a, b) => b.valuePos - a.valuePos) : [...group].sort((a, b) => a.valuePos - b.valuePos);
-    let currentEdge = baseline;
+    let currentEdge = baselinePx;
     sortedBars.forEach((bar, index) => {
       const newLength = bar.length * (1 - lengthReduction);
       let newValuePos;
@@ -194,20 +195,21 @@ function applyStackGap(bars, stackGap, layout, baseline) {
  * @param bars - Array of bar items with final valuePos, length, and dataValue
  * @param initialBarMinSizes - Per-bar initial sizes in pixels for entrance animation
  * @param stackGap - Gap between adjacent bars in pixels
- * @param baseline - Pixel position of the zero value on the value axis
+ * @param baseline - Value-axis baseline in data space
+ * @param baselinePx - Pixel position of the value-axis baseline on the value axis
  * @param layout - The layout of the chart
- * @returns Array of origin positions (one per bar, parallel to input), all defaulting to baseline
+ * @returns Array of origin positions (one per bar, parallel to input), all defaulting to baselinePx
  */
-function getBarOrigins(bars, initialBarMinSizes, stackGap, baseline, layout) {
-  const result = bars.map(() => baseline);
+function getBarOrigins(bars, initialBarMinSizes, stackGap, baseline, baselinePx, layout) {
+  const result = bars.map(() => baselinePx);
   if (bars.length === 0 || initialBarMinSizes.every(size => !size)) return result;
   const isPositive = bar => {
     const [lo, hi] = [...bar.dataValue].sort((a, b) => a - b);
-    return lo >= 0 && hi !== lo;
+    return lo >= baseline && hi !== lo;
   };
   const isNegative = bar => {
     const [lo, hi] = [...bar.dataValue].sort((a, b) => a - b);
-    return hi <= 0 && hi !== lo;
+    return hi <= baseline && hi !== lo;
   };
   const positiveBars = bars.map((bar, i) => ({
     bar,
@@ -219,7 +221,7 @@ function getBarOrigins(bars, initialBarMinSizes, stackGap, baseline, layout) {
     return isPositive(bar);
   }).sort((a, b) => layout === 'vertical' ? b.bar.valuePos - a.bar.valuePos : a.bar.valuePos - b.bar.valuePos);
   if (layout === 'vertical') {
-    let currentPositive = baseline;
+    let currentPositive = baselinePx;
     positiveBars.forEach((_ref2, idx) => {
       var _initialBarMinSizes$i;
       let {
@@ -233,7 +235,7 @@ function getBarOrigins(bars, initialBarMinSizes, stackGap, baseline, layout) {
       }
     });
   } else {
-    let currentPositive = baseline;
+    let currentPositive = baselinePx;
     positiveBars.forEach((_ref3, idx) => {
       var _initialBarMinSizes$i2;
       let {
@@ -257,7 +259,7 @@ function getBarOrigins(bars, initialBarMinSizes, stackGap, baseline, layout) {
     return isNegative(bar);
   }).sort((a, b) => layout === 'vertical' ? a.bar.valuePos - b.bar.valuePos : b.bar.valuePos + b.bar.length - (a.bar.valuePos + a.bar.length));
   if (layout === 'vertical') {
-    let currentNegative = baseline;
+    let currentNegative = baselinePx;
     negativeBars.forEach((_ref5, idx) => {
       var _initialBarMinSizes$i3;
       let {
@@ -271,7 +273,7 @@ function getBarOrigins(bars, initialBarMinSizes, stackGap, baseline, layout) {
       }
     });
   } else {
-    let currentNegative = baseline;
+    let currentNegative = baselinePx;
     negativeBars.forEach((_ref6, idx) => {
       var _initialBarMinSizes$i4;
       let {
@@ -382,11 +384,12 @@ export function getStackInitialClipRect(stackRect, layout, origin) {
  *
  * @param bars - Array of bar items with current valuePos and length
  * @param barMinSize - Minimum bar size in pixels
- * @param layout - The layout of the chart
- * @param baseline - Pixel position of the zero value on the value axis
+ * @param baseline - Value-axis baseline in data space
+ * @param baselinePx - Pixel position of the value-axis baseline on the value axis
+ * @param layout - Chart layout
  * @returns New array of bars with adjusted valuePos and length
  */
-function applyBarMinSize(bars, barMinSize, layout, baseline) {
+function applyBarMinSize(bars, barMinSize, baseline, baselinePx, layout) {
   if (!barMinSize || bars.length === 0) return bars;
   const originalTotalLength = bars.reduce((sum, bar) => sum + bar.length, 0);
   const needsExpansion = bars.map(bar => bar.length < barMinSize);
@@ -429,45 +432,85 @@ function applyBarMinSize(bars, barMinSize, layout, baseline) {
     // independent of the current valuePos (which hasn't been repositioned yet).
     const barsAboveBaseline = stackedSortedBars.filter(bar => {
       const [bottom, top] = [...bar.dataValue].sort((a, b) => a - b);
-      return layout === 'vertical' ? bottom >= 0 && top !== bottom : top <= 0 && top !== bottom;
+      return bottom >= baseline && top !== bottom;
     });
     const barsBelowBaseline = stackedSortedBars.filter(bar => {
       const [bottom, top] = [...bar.dataValue].sort((a, b) => a - b);
-      return layout === 'vertical' ? top <= 0 && top !== bottom : bottom >= 0 && top !== bottom;
+      return top <= baseline && bottom !== top;
     });
 
-    // Restack bars above baseline (growing away from it in the positive direction)
-    let currentAbove = baseline;
-    for (let i = barsAboveBaseline.length - 1; i >= 0; i--) {
-      const bar = barsAboveBaseline[i];
-      const newValuePos = currentAbove - bar.length;
-      newPositions.set(bar.seriesId, {
-        valuePos: newValuePos,
-        length: bar.length
-      });
-      if (i > 0) {
-        const nextBar = barsAboveBaseline[i - 1];
-        const originalCurrent = bars.find(b => b.seriesId === bar.seriesId);
-        const originalNext = bars.find(b => b.seriesId === nextBar.seriesId);
-        const originalGap = originalCurrent.valuePos - (originalNext.valuePos + originalNext.length);
-        currentAbove = newValuePos - originalGap;
+    // Restack bars above baseline (positive data side).
+    // vertical → grow up (−Y from baseline); horizontal → grow right (+X from baseline).
+    if (layout === 'vertical') {
+      let currentAbove = baselinePx;
+      for (let i = barsAboveBaseline.length - 1; i >= 0; i--) {
+        const bar = barsAboveBaseline[i];
+        const newValuePos = currentAbove - bar.length;
+        newPositions.set(bar.seriesId, {
+          valuePos: newValuePos,
+          length: bar.length
+        });
+        if (i > 0) {
+          const nextBar = barsAboveBaseline[i - 1];
+          const originalCurrent = bars.find(b => b.seriesId === bar.seriesId);
+          const originalNext = bars.find(b => b.seriesId === nextBar.seriesId);
+          const originalGap = originalCurrent.valuePos - (originalNext.valuePos + originalNext.length);
+          currentAbove = newValuePos - originalGap;
+        }
+      }
+    } else {
+      let currentEdge = baselinePx;
+      for (let i = 0; i < barsAboveBaseline.length; i++) {
+        const bar = barsAboveBaseline[i];
+        newPositions.set(bar.seriesId, {
+          valuePos: currentEdge,
+          length: bar.length
+        });
+        if (i < barsAboveBaseline.length - 1) {
+          const nextBar = barsAboveBaseline[i + 1];
+          const originalCurrent = bars.find(b => b.seriesId === bar.seriesId);
+          const originalNext = bars.find(b => b.seriesId === nextBar.seriesId);
+          const originalGap = originalNext.valuePos - (originalCurrent.valuePos + originalCurrent.length);
+          currentEdge = currentEdge + bar.length + originalGap;
+        }
       }
     }
 
-    // Restack bars below baseline (growing away from it in the negative direction)
-    let currentBelow = baseline;
-    for (let i = 0; i < barsBelowBaseline.length; i++) {
-      const bar = barsBelowBaseline[i];
-      newPositions.set(bar.seriesId, {
-        valuePos: currentBelow,
-        length: bar.length
-      });
-      if (i < barsBelowBaseline.length - 1) {
-        const nextBar = barsBelowBaseline[i + 1];
-        const originalCurrent = bars.find(b => b.seriesId === bar.seriesId);
-        const originalNext = bars.find(b => b.seriesId === nextBar.seriesId);
-        const originalGap = originalNext.valuePos - (originalCurrent.valuePos + originalCurrent.length);
-        currentBelow = currentBelow + bar.length + originalGap;
+    // Restack bars below baseline (negative data side).
+    // vertical → grow down (+Y); horizontal → grow left (−X).
+    if (layout === 'vertical') {
+      let currentBelow = baselinePx;
+      for (let i = 0; i < barsBelowBaseline.length; i++) {
+        const bar = barsBelowBaseline[i];
+        newPositions.set(bar.seriesId, {
+          valuePos: currentBelow,
+          length: bar.length
+        });
+        if (i < barsBelowBaseline.length - 1) {
+          const nextBar = barsBelowBaseline[i + 1];
+          const originalCurrent = bars.find(b => b.seriesId === bar.seriesId);
+          const originalNext = bars.find(b => b.seriesId === nextBar.seriesId);
+          const originalGap = originalNext.valuePos - (originalCurrent.valuePos + originalCurrent.length);
+          currentBelow = currentBelow + bar.length + originalGap;
+        }
+      }
+    } else {
+      const sortedBelow = [...barsBelowBaseline].sort((a, b) => b.valuePos - a.valuePos);
+      let currentEdge = baselinePx;
+      for (let i = sortedBelow.length - 1; i >= 0; i--) {
+        const bar = sortedBelow[i];
+        const newValuePos = currentEdge - bar.length;
+        newPositions.set(bar.seriesId, {
+          valuePos: newValuePos,
+          length: bar.length
+        });
+        if (i > 0) {
+          const nextBar = sortedBelow[i - 1];
+          const originalCurrent = bars.find(b => b.seriesId === bar.seriesId);
+          const originalNext = bars.find(b => b.seriesId === nextBar.seriesId);
+          const originalGap = originalCurrent.valuePos - (originalNext.valuePos + originalNext.length);
+          currentEdge = newValuePos - originalGap;
+        }
       }
     }
   }
@@ -493,10 +536,11 @@ function applyBarMinSize(bars, barMinSize, layout, baseline) {
  * @param layout - The layout of the chart
  * @param indexPos - Pixel position along the categorical (index) axis
  * @param thickness - Bar thickness in pixels
- * @param baseline - Pixel position of the zero value on the value axis
+ * @param baseline - Value-axis baseline in data space
+ * @param baselinePx - Pixel position of the value-axis baseline on the value axis
  * @returns Updated bars and stackBounds; unchanged if stackSize >= stackMinSize
  */
-function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, indexPos, thickness, baseline) {
+function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, indexPos, thickness, baseline, baselinePx) {
   if (!stackMinSize || stackSize >= stackMinSize) return {
     bars,
     stackBounds
@@ -513,10 +557,10 @@ function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, i
     const [bottom, top] = [...bar.dataValue].sort((a, b) => a - b);
     let newValuePos;
     const newLength = stackMinSize;
-    if (bottom >= 0 && top !== bottom) {
+    if (bottom >= baseline && top !== bottom) {
       // Bar is on the positive side: vertical→expands upward (↑), horizontal→expands rightward (→)
       newValuePos = layout === 'vertical' ? bar.valuePos - sizeIncrease : bar.valuePos;
-    } else if (top <= 0 && top !== bottom) {
+    } else if (top <= baseline && top !== bottom) {
       // Bar is on the negative side: vertical→expands downward (↓), horizontal→expands leftward (←)
       newValuePos = layout === 'vertical' ? bar.valuePos : bar.valuePos - sizeIncrease;
     } else {
@@ -542,12 +586,12 @@ function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, i
 
     // For vertical: positive bars are above baseline (smaller Y), negative bars are below (larger Y)
     // For horizontal: positive bars are right of baseline (larger X), negative bars are left (smaller X)
-    const barsOnPositiveSide = layout === 'vertical' ? sortedBars.filter(bar => bar.valuePos + bar.length <= baseline) : sortedBars.filter(bar => bar.valuePos >= baseline);
-    const barsOnNegativeSide = layout === 'vertical' ? sortedBars.filter(bar => bar.valuePos >= baseline) : sortedBars.filter(bar => bar.valuePos + bar.length <= baseline);
+    const barsOnPositiveSide = layout === 'vertical' ? sortedBars.filter(bar => bar.valuePos + bar.length <= baselinePx) : sortedBars.filter(bar => bar.valuePos >= baselinePx);
+    const barsOnNegativeSide = layout === 'vertical' ? sortedBars.filter(bar => bar.valuePos >= baselinePx) : sortedBars.filter(bar => bar.valuePos + bar.length <= baselinePx);
     const newPositions = new Map();
     if (layout === 'vertical') {
       // Stack from baseline upward (decreasing valuePos) for positive bars
-      let currentPos = baseline;
+      let currentPos = baselinePx;
       for (let i = barsOnPositiveSide.length - 1; i >= 0; i--) {
         const bar = barsOnPositiveSide[i];
         const newLength = bar.length * barScaleFactor;
@@ -563,7 +607,7 @@ function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, i
         }
       }
       // Stack from baseline downward (increasing valuePos) for negative bars
-      let currentPosBelow = baseline;
+      let currentPosBelow = baselinePx;
       for (let i = 0; i < barsOnNegativeSide.length; i++) {
         const bar = barsOnNegativeSide[i];
         const newLength = bar.length * barScaleFactor;
@@ -579,7 +623,7 @@ function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, i
       }
     } else {
       // Stack from baseline rightward (increasing valuePos) for positive bars
-      let currentPos = baseline;
+      let currentPos = baselinePx;
       for (let i = 0; i < barsOnPositiveSide.length; i++) {
         const bar = barsOnPositiveSide[i];
         const newLength = bar.length * barScaleFactor;
@@ -594,7 +638,7 @@ function applyStackMinSize(bars, stackMinSize, stackSize, stackBounds, layout, i
         }
       }
       // Stack from baseline leftward (decreasing valuePos) for negative bars
-      let currentPosLeft = baseline;
+      let currentPosLeft = baselinePx;
       for (let i = barsOnNegativeSide.length - 1; i >= 0; i--) {
         const bar = barsOnNegativeSide[i];
         const newLength = bar.length * barScaleFactor;
@@ -675,16 +719,23 @@ function applyBorderRadiusLogic(bars, layout, stackGap) {
 export const EPSILON = 1e-4;
 
 /**
- * Computes and clamps the stack baseline position on the value axis.
+ * Computes and clamps the value-axis baseline position in pixels.
+ *
+ * When `baseline` (data space) is omitted, the baseline is chosen heuristically from the scale domain:
+ * - If the full domain is positive, use domain min.
+ * - If the full domain is negative, use domain max.
+ * - If the domain crosses zero, use `0`.
+ * When `baseline` is set, that value is used as the data-space baseline instead.
  *
- * - If the full domain is positive, baseline is domain min.
- * - If the full domain is negative, baseline is domain max.
- * - If the domain crosses zero, baseline is 0.
+ * @param valueScale - Scale for the value axis
+ * @param stackRect - Bounding rect of the stack in pixels
+ * @param layout - Chart layout
+ * @param baseline - Optional value-axis baseline in data space
  */
-export function getStackBaseline(valueScale, stackRect, layout) {
+export function getBaselinePx(valueScale, stackRect, layout, baseline) {
   const [domainMin, domainMax] = valueScale.domain();
-  const baselineValue = domainMin >= 0 ? domainMin : domainMax <= 0 ? domainMax : 0;
-  const baselinePos = valueScale(baselineValue);
+  const baselineInData = baseline != null ? baseline : domainMin >= 0 ? domainMin : domainMax <= 0 ? domainMax : 0;
+  const baselinePos = valueScale(baselineInData);
   if (layout === 'vertical') {
     return Math.max(stackRect.y, Math.min(baselinePos != null ? baselinePos : stackRect.y + stackRect.height, stackRect.y + stackRect.height));
   }
@@ -725,7 +776,8 @@ function getStackSizeForLayout(layout, stackRect) {
  * @param params.seriesGradients - Precomputed gradient configs per series (undefined entries are skipped)
  * @param params.roundBaseline - Whether to round the face touching the baseline
  * @param params.layout - The layout of the chart
- * @param params.baseline - Pixel position of the zero value on the value axis
+ * @param params.baseline - Value-axis baseline in data space
+ * @param params.baselinePx - Pixel position of the value-axis baseline on the value axis
  * @param params.stackGap - Gap between adjacent bars in pixels
  * @param params.barMinSize - Minimum individual bar size in pixels
  * @param params.stackMinSize - Minimum total stack size in pixels
@@ -744,7 +796,8 @@ export function getBars(params) {
     seriesGradients,
     roundBaseline,
     layout,
-    baseline,
+    baseline = 0,
+    baselinePx,
     stackGap,
     barMinSize,
     stackMinSize,
@@ -766,10 +819,10 @@ export function getBars(params) {
     const originalValue = originalData == null ? void 0 : originalData[categoryIndex];
     const shouldApplyGap = !Array.isArray(originalValue);
     const [bottom, top] = [...value].sort((a, b) => a - b);
-    const edgeBottom = (_valueScale = valueScale(bottom)) != null ? _valueScale : baseline;
-    const edgeTop = (_valueScale2 = valueScale(top)) != null ? _valueScale2 : baseline;
-    const roundTop = roundBaseline || Math.abs(edgeTop - baseline) >= EPSILON;
-    const roundBottom = roundBaseline || Math.abs(edgeBottom - baseline) >= EPSILON;
+    const edgeBottom = (_valueScale = valueScale(bottom)) != null ? _valueScale : baselinePx;
+    const edgeTop = (_valueScale2 = valueScale(top)) != null ? _valueScale2 : baselinePx;
+    const roundTop = roundBaseline || Math.abs(top - baseline) >= EPSILON && Math.abs(edgeTop - baselinePx) >= EPSILON;
+    const roundBottom = roundBaseline || Math.abs(bottom - baseline) >= EPSILON && Math.abs(edgeBottom - baselinePx) >= EPSILON;
     const length = Math.abs(edgeBottom - edgeTop);
     const valuePos = Math.min(edgeBottom, edgeTop);
     if (length <= 0) return;
@@ -809,12 +862,12 @@ export function getBars(params) {
 
   // Apply proportional gap distribution to maintain total stack length
   if (stackGap && allBars.length > 1) {
-    allBars = applyStackGap(allBars, stackGap, layout, baseline);
+    allBars = applyStackGap(allBars, stackGap, layout, baseline, baselinePx);
   }
 
   // Apply barMinSize constraints
   if (barMinSize) {
-    allBars = applyBarMinSize(allBars, barMinSize, layout, baseline);
+    allBars = applyBarMinSize(allBars, barMinSize, baseline, baselinePx, layout);
   }
   allBars = applyBorderRadiusLogic(allBars, layout, stackGap);
 
@@ -824,7 +877,7 @@ export function getBars(params) {
     const maxValuePos = Math.max(...allBars.map(bar => bar.valuePos + bar.length));
     const stackSize = maxValuePos - minValuePos;
     const stackBounds = getStackBoundsForLayout(layout, indexPos, thickness, minValuePos, stackSize);
-    const result = applyStackMinSize(allBars, stackMinSize, stackSize, stackBounds, layout, indexPos, thickness, baseline);
+    const result = applyStackMinSize(allBars, stackMinSize, stackSize, stackBounds, layout, indexPos, thickness, baseline, baselinePx);
     allBars = result.bars;
 
     // Reapply border radius logic only if we actually scaled
@@ -834,7 +887,7 @@ export function getBars(params) {
     }
   }
   const initialBarMinSizes = getInitialBarMinSizes(allBars, barMinSize, stackMinSize);
-  const barOrigins = getBarOrigins(allBars, initialBarMinSizes, stackGap != null ? stackGap : 0, baseline, layout);
+  const barOrigins = getBarOrigins(allBars, initialBarMinSizes, stackGap != null ? stackGap : 0, baseline, baselinePx, layout);
   return allBars.map((bar, i) => _extends({}, bar, {
     x: layout === 'vertical' ? indexPos : bar.valuePos,
     y: layout === 'vertical' ? bar.valuePos : indexPos,

package/esm/chart/utils/chart.js

@@ -1,5 +1,6 @@
 import { isSharedValue } from 'react-native-reanimated';
 import { stack as d3Stack, stackOffsetDiverging, stackOrderNone } from 'd3-shape';
+import { defaultAxisId } from './axis';
 export const defaultStackId = 'DEFAULT_STACK_ID';
 
 /**
@@ -58,17 +59,45 @@ const createStackKey = series => {
   return series.stackId + ":" + xAxisId + ":" + yAxisId;
 };
 
+/**
+ * Get the baseline for a series on the value axis for a series (stacking and plain numeric points).
+ * @returns The baseline for the series on the value axis, or `0` if none.
+ */
+const getValueAxisBaselineForSeries = (layout, series, xAxisConfigs, yAxisConfigs) => {
+  var _series$yAxisId, _yAxisConfigs$find$ba, _yAxisConfigs$find;
+  if (layout === 'horizontal') {
+    var _series$xAxisId, _xAxisConfigs$find$ba, _xAxisConfigs$find;
+    const seriesAxisId = (_series$xAxisId = series.xAxisId) != null ? _series$xAxisId : defaultAxisId;
+    return (_xAxisConfigs$find$ba = (_xAxisConfigs$find = xAxisConfigs.find(a => a.id === seriesAxisId)) == null ? void 0 : _xAxisConfigs$find.baseline) != null ? _xAxisConfigs$find$ba : 0;
+  }
+  const seriesAxisId = (_series$yAxisId = series.yAxisId) != null ? _series$yAxisId : defaultAxisId;
+  return (_yAxisConfigs$find$ba = (_yAxisConfigs$find = yAxisConfigs.find(a => a.id === seriesAxisId)) == null ? void 0 : _yAxisConfigs$find.baseline) != null ? _yAxisConfigs$find$ba : 0;
+};
+
 /**
  * Transforms series data into stacked data using D3's stack algorithm.
  * Returns a map of series ID to transformed [baseline, value] tuples.
  *
  * @param series - Array of series with potential stack properties
+ * @param layout - When set with axis configs, value-axis baselines are resolved for stacking
  * @returns Map of series ID to stacked data arrays
  */
-export const getStackedSeriesData = series => {
+export const getStackedSeriesData = (series, layout, xAxisConfigs, yAxisConfigs) => {
   const stackedDataMap = new Map();
   const numericStackGroups = new Map();
   const individualSeries = [];
+  const normalizeSeriesData = seriesItem => {
+    if (!seriesItem.data) return;
+    const baseline = getValueAxisBaselineForSeries(layout, seriesItem, xAxisConfigs, yAxisConfigs);
+    return seriesItem.data.map(val => {
+      if (val === null) return null;
+      if (Array.isArray(val)) {
+        return val;
+      }
+      if (typeof val === 'number') return [baseline, val];
+      return null;
+    });
+  };
   series.forEach(s => {
     var _s$data2;
     const stackKey = createStackKey(s);
@@ -83,31 +112,34 @@ export const getStackedSeriesData = series => {
     }
   });
   individualSeries.forEach(s => {
-    if (!s.data) return;
-    const normalizedData = s.data.map(val => {
-      if (val === null) return null;
-      if (Array.isArray(val)) {
-        return val;
-      }
-      if (typeof val === 'number') {
-        return [0, val];
-      }
-      return null;
-    });
+    const normalizedData = normalizeSeriesData(s);
+    if (!normalizedData) return;
     stackedDataMap.set(s.id, normalizedData);
   });
-  numericStackGroups.forEach((groupSeries, stackKey) => {
+  numericStackGroups.forEach(groupSeries => {
+    // A lone series with stackId should still behave like a non-stacked series.
+    if (groupSeries.length < 2) {
+      groupSeries.forEach(singleSeries => {
+        const normalizedData = normalizeSeriesData(singleSeries);
+        if (!normalizedData) return;
+        stackedDataMap.set(singleSeries.id, normalizedData);
+      });
+      return;
+    }
     const maxLength = Math.max(...groupSeries.map(s => {
       var _s$data3;
       return ((_s$data3 = s.data) == null ? void 0 : _s$data3.length) || 0;
     }));
     if (maxLength === 0) return;
+    const first = groupSeries[0];
+    const groupBaseline = getValueAxisBaselineForSeries(layout, first, xAxisConfigs, yAxisConfigs);
     const dataset = new Array(maxLength).fill(undefined).map((_, i) => {
       const row = {};
       for (const s of groupSeries) {
         var _s$data4;
         const val = (_s$data4 = s.data) == null ? void 0 : _s$data4[i];
-        const num = typeof val === 'number' ? val : 0;
+        // Stack around baseline by translating values into baseline-relative deltas.
+        const num = typeof val === 'number' ? val - groupBaseline : 0;
         row[s.id] = num;
       }
       return row;
@@ -118,7 +150,7 @@ export const getStackedSeriesData = series => {
       const seriesId = keys[layerIndex];
       const stackedData = layer.map(_ref => {
         let [bottom, top] = _ref;
-        return [bottom, top];
+        return [bottom + groupBaseline, top + groupBaseline];
       });
       stackedDataMap.set(seriesId, stackedData);
     });
@@ -157,7 +189,7 @@ export const getLineData = data => {
  * Range represents the range of y-values from the data.
  * Handles stacking by transforming data when series have stack properties.
  */
-export const getChartRange = (series, min, max) => {
+export const getChartRange = (series, layout, xAxisConfigs, yAxisConfigs, min, max) => {
   const range = {
     min,
     max
@@ -183,11 +215,11 @@ export const getChartRange = (series, min, max) => {
   const hasStacks = Array.from(stackGroups.keys()).some(k => k !== undefined);
   if (hasStacks) {
     // Get stacked data using the shared function
-    const stackedDataMap = getStackedSeriesData(series);
+    const stackedDataMap = getStackedSeriesData(series, layout, xAxisConfigs, yAxisConfigs);
 
     // Find the extreme values from the stacked data
-    let stackedMax = 0;
-    let stackedMin = 0;
+    let stackedMax = -Infinity;
+    let stackedMin = Infinity;
     stackedDataMap.forEach(stackedData => {
       stackedData.forEach(point => {
         if (point !== null) {
@@ -199,8 +231,8 @@ export const getChartRange = (series, min, max) => {
     });
 
     // Don't add padding - let D3's nice() function handle axis padding
-    if (range.min === undefined) range.min = Math.min(0, stackedMin);
-    if (range.max === undefined) range.max = Math.max(0, stackedMax);
+    if (range.min === undefined) range.min = stackedMin === Infinity ? 0 : stackedMin;
+    if (range.max === undefined) range.max = stackedMax === -Infinity ? 0 : stackedMax;
   } else {
     // No stacking, calculate range from raw values
     const allValues = [];

package/esm/chart/utils/gradient.js

@@ -9,6 +9,14 @@ import { applySerializableScale, isCategoricalScale, isSerializableScale } from
  * Defines a gradient.
  */
 
+/**
+ * Resolves the axis used for gradient processing.
+ */
+export const getGradientAxis = (gradient, layout) => {
+  var _gradient$axis;
+  return (_gradient$axis = gradient.axis) != null ? _gradient$axis : layout === 'horizontal' ? 'x' : 'y';
+};
+
 /**
  * Resolves gradient stops, handling both static arrays and function forms.
  * When stops is a function, calls it with the domain bounds.
@@ -87,9 +95,10 @@ export const getColorWithOpacity = (color1, opacity) => {
  * Processes a GradientDefinition into a renderable GradientConfig.
  * Supports both numeric scales (linear, log) and categorical scales (band).
  *
- * @param gradient - GradientDefinition configuration (required)
- * @param xScale - X-axis scale (required)
- * @param yScale - Y-axis scale (required)
+ * @param gradient - GradientDefinition configuration
+ * @param xScale - X-axis scale
+ * @param yScale - Y-axis scale
+ * @param layout - Chart layout
  * @returns GradientConfig or null if gradient processing fails
  *
  * @example
@@ -110,11 +119,12 @@ export const getColorWithOpacity = (color1, opacity) => {
  *   );
  * }
  */
-export const getGradientConfig = (gradient, xScale, yScale) => {
+export const getGradientConfig = (gradient, xScale, yScale, layout) => {
   if (!gradient) return;
 
   // Get the scale based on axis
-  const scale = gradient.axis === 'x' ? xScale : yScale;
+  const axis = getGradientAxis(gradient, layout);
+  const scale = axis === 'x' ? xScale : yScale;
   if (!scale) return;
 
   // Extract domain from scale

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",