@coinbase/cds-mobile-visualization 3.6.2 → 3.7.0

package/esm/chart/area/Area.js

@@ -13,7 +13,6 @@ export const Area = /*#__PURE__*/memo(_ref => {
     AreaComponent: AreaComponentProp,
     fill: fillProp,
     fillOpacity = 1,
-    baseline,
     connectNulls,
     gradient: gradientProp,
     transitions,
@@ -74,7 +73,6 @@ export const Area = /*#__PURE__*/memo(_ref => {
   if (!xScale || !yScale || !sourceData || !area) return;
   return /*#__PURE__*/_jsx(AreaComponent, {
     animate: animate,
-    baseline: baseline,
     d: area,
     fill: fill,
     fillOpacity: fillOpacity,

package/esm/chart/area/AreaChart.js

@@ -1,6 +1,6 @@
 const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "transitions", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
-  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "opacity", "LineComponent", "stackId"],
   _excluded5 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "fill", "fillOpacity", "stackId", "type"];
 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); }
@@ -9,7 +9,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import { XAxis, YAxis } from '../axis';
 import { CartesianChart } from '../CartesianChart';
 import { Line } from '../line/Line';
-import { defaultStackId } from '../utils';
+import { defaultStackId, withBaselineDomain } from '../utils';
 import { Area } from './Area';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
@@ -45,7 +45,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       gradient: s.gradient,
       xAxisId: s.xAxisId,
       yAxisId: s.yAxisId,
-      stackId: s.stackId
+      stackId: s.stackId,
+      legendShape: s.legendShape
     }));
   }, [series]);
   const transformedSeries = useMemo(() => {
@@ -68,6 +69,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       domain: xDomain,
       domainLimit: xDomainLimit,
       range: xRange,
+      baseline: xBaseline,
       id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
@@ -79,35 +81,29 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       domain: yDomain,
       domainLimit: yDomainLimit,
       range: yRange,
+      baseline: yBaseline,
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  const isHorizontalLayout = chartProps.layout === 'horizontal';
+  const valueAxisBaseline = isHorizontalLayout ? xBaseline : yBaseline;
   const xAxisConfig = {
     scaleType: xScaleType,
     data: xData,
     categoryPadding: xCategoryPadding,
-    domain: xDomain,
+    domain: isHorizontalLayout ? withBaselineDomain(xDomain, valueAxisBaseline) : xDomain,
     domainLimit: xDomainLimit,
-    range: xRange
+    range: xRange,
+    baseline: xBaseline
   };
-  const hasNegativeValues = useMemo(() => {
-    if (!series) return false;
-    return series.some(s => {
-      var _s$data;
-      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]);
-
-  // Set default min domain to 0 for area chart, but only if there are no negative values
   const yAxisConfig = {
     scaleType: yScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: hasNegativeValues ? yDomain : _extends({
-      min: 0
-    }, yDomain),
+    domain: !isHorizontalLayout ? withBaselineDomain(yDomain, valueAxisBaseline) : yDomain,
     domainLimit: yDomainLimit,
-    range: yRange
+    range: yRange,
+    baseline: yBaseline
   };
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,

package/esm/chart/area/DottedArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "xAxisId", "yAxisId", "gradient", "animate", "transitions", "transition"];
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "gradient", "animate", "transitions", "transition"];
 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 } from 'react';
@@ -17,6 +17,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * on the fill color and peak/baseline opacities.
  */
 export const DottedArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       d,
       fill: fillProp,
@@ -24,7 +25,6 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       dotSize = 1,
       peakOpacity = 1,
       baselineOpacity = 0,
-      baseline,
       xAxisId,
       yAxisId,
       gradient: gradientProp,
@@ -66,9 +66,9 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
     if (!valueAxisConfig) return;
-    const baselineValue = getBaseline(valueAxisConfig.domain, baseline);
+    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
     return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
-  }, [gradientProp, valueAxisConfig, fill, baseline, peakOpacity, baselineOpacity, gradientAxis]);
+  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
 
   // Update transition is used for clip path, we skip update animation on Path itself
   return /*#__PURE__*/_jsx(Group, {
@@ -81,7 +81,9 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       transitions: transitions
     }, pathProps, {
       children: gradient && /*#__PURE__*/_jsx(Gradient, {
+        animate: shouldAnimate,
         gradient: gradient,
+        transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
         xAxisId: xAxisId,
         yAxisId: yAxisId
       })

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "xAxisId", "yAxisId", "animate", "transitions", "transition"];
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "animate", "transitions", "transition"];
 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 } from 'react';
@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * on the fill color and peak/baseline opacities.
  */
 export const GradientArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       d,
       fill: fillProp,
@@ -21,7 +22,6 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       gradient: gradientProp,
       peakOpacity = 0.3,
       baselineOpacity = 0,
-      baseline,
       xAxisId,
       yAxisId,
       animate,
@@ -41,9 +41,9 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
     if (!valueAxisConfig) return;
-    const baselineValue = getBaseline(valueAxisConfig.domain, baseline);
+    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
     return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
-  }, [gradientProp, valueAxisConfig, fill, baseline, peakOpacity, baselineOpacity, gradientAxis]);
+  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
   return /*#__PURE__*/_jsx(Path, _extends({
     animate: animate,
     d: d,
@@ -53,7 +53,9 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
     transitions: transitions
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      animate: animate,
       gradient: gradient,
+      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
       xAxisId: xAxisId,
       yAxisId: yAxisId
     })

package/esm/chart/area/SolidArea.js

@@ -12,6 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Otherwise, renders with solid fill.
  */
 export const SolidArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       d,
       fill,
@@ -34,7 +35,9 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
     transitions: transitions
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      animate: animate,
       gradient: gradient,
+      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
       xAxisId: xAxisId,
       yAxisId: yAxisId
     })

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -1,11 +1,15 @@
-import { useCallback } from 'react';
+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); }
+import { memo, useCallback } from 'react';
+import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { DottedLine } from '../../line';
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { DefaultReferenceLineLabel, DottedLine, ReferenceLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const basicData = [24, 13, 98, 39, 48, 38, 43];
+const baselineThresholdData = [40, 28, 21, 5, 48, 5, 28, 2, 29, 48, 18, 30, 29, 8].map(value => value + 50);
 const BasicExample = () => {
   const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + basicData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
@@ -49,12 +53,164 @@ const StackedExample = () => {
       data: potentialRewardsData,
       color: theme.color.fgPositive,
       type: 'dotted',
-      LineComponent: DottedLine
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [6, 6]
+      }))
     }],
     type: "dotted",
     children: /*#__PURE__*/_jsx(Scrubber, {})
   });
 };
+const CustomBaselineExample = () => {
+  const theme = useTheme();
+  const candles = [...btcCandles].reverse().slice(0, 180);
+  const prices = candles.map(candle => parseFloat(candle.close));
+  const dates = candles.map(candle => new Date(parseInt(candle.start, 10) * 1000));
+  const startingPrice = prices[0];
+  const formatPrice = useCallback(price => {
+    return "$" + price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, []);
+  const formatPriceInThousands = useCallback(price => {
+    return "$" + (price / 1000).toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }) + "k";
+  }, []);
+  const formatDate = useCallback(date => {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  }, []);
+  const formatLabel = useCallback(dataIndex => formatPrice(prices[dataIndex]) + " " + formatDate(dates[dataIndex]), [dates, formatDate, formatPrice, prices]);
+  const PriceLabel = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: theme.color.bgSecondary,
+    borderRadius: 12.5,
+    color: theme.color.fg,
+    dx: 12,
+    font: "label1",
+    horizontalAlignment: "left",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    }
+  })));
+  const chartAccessibilityLabel = "Bitcoin area chart with custom baseline. Current price: " + formatPrice(prices[prices.length - 1]) + ". Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => formatPrice(prices[index]) + " " + formatDate(dates[index]), [dates, formatDate, formatPrice, prices]);
+  return /*#__PURE__*/_jsxs(AreaChart, {
+    enableScrubbing: true,
+    showLines: true,
+    showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    fillOpacity: 0.5,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 300,
+    series: [{
+      id: 'prices',
+      data: prices,
+      gradient: {
+        stops: [{
+          offset: startingPrice,
+          color: theme.color.fgNegative
+        }, {
+          offset: startingPrice,
+          color: theme.color.fgPositive
+        }]
+      }
+    }],
+    yAxis: {
+      baseline: startingPrice,
+      showGrid: true,
+      tickLabelFormatter: formatPriceInThousands,
+      domain: {
+        min: 70000,
+        max: 120000
+      },
+      ticks: [80000, 100000, 120000]
+    },
+    children: [/*#__PURE__*/_jsx(Scrubber, {
+      labelElevated: true,
+      label: formatLabel
+    }), /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: PriceLabel,
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [0, 16],
+        strokeWidth: 3
+      })),
+      dataY: startingPrice,
+      label: formatPrice(startingPrice),
+      stroke: theme.color.fg
+    })]
+  });
+};
+const AxisBaselineThresholdExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(AreaChart, {
+      enableScrubbing: true,
+      showLines: true,
+      showYAxis: true,
+      accessibilityLabel: "Area chart with threshold baseline at 30.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + baselineThresholdData[index],
+      height: 220,
+      inset: 0,
+      series: [{
+        id: 'axis-baseline-threshold-vertical',
+        data: baselineThresholdData,
+        gradient: {
+          stops: [{
+            offset: 30,
+            color: theme.color.fgNegative
+          }, {
+            offset: 30,
+            color: theme.color.fgPositive
+          }]
+        }
+      }],
+      type: "dotted",
+      yAxis: {
+        showGrid: true,
+        baseline: 30
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {})
+    }), /*#__PURE__*/_jsx(AreaChart, {
+      enableScrubbing: true,
+      showLines: true,
+      showXAxis: true,
+      accessibilityLabel: "Horizontal area chart with threshold baseline at 30.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + baselineThresholdData[index],
+      height: 220,
+      inset: 0,
+      layout: "horizontal",
+      series: [{
+        id: 'axis-baseline-threshold-horizontal',
+        data: baselineThresholdData,
+        gradient: {
+          stops: [{
+            offset: 30,
+            color: theme.color.fgNegative
+          }, {
+            offset: 30,
+            color: theme.color.fgPositive
+          }]
+        }
+      }],
+      type: "dotted",
+      xAxis: {
+        showGrid: true,
+        baseline: 30
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {})
+    })]
+  });
+};
 const AreaChartStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -82,6 +238,36 @@ const AreaChartStories = () => {
         },
         children: /*#__PURE__*/_jsx(Scrubber, {})
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axis Baseline",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showYAxis: true,
+        accessibilityLabel: "Area chart with custom axis baseline at 100.",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [112, 97, 121, 103, 129, 118, 94][index],
+        height: 220,
+        series: [{
+          id: 'netFlow',
+          data: [112, 97, 121, 103, 129, 118, 94]
+        }],
+        yAxis: {
+          baseline: 100,
+          domain: {
+            min: 80,
+            max: 140
+          },
+          showGrid: true,
+          tickLabelFormatter: value => "" + value
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axis Baseline Threshold",
+      children: /*#__PURE__*/_jsx(AxisBaselineThresholdExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Baseline",
+      children: /*#__PURE__*/_jsx(CustomBaselineExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Styles",
       children: /*#__PURE__*/_jsx(AreaChart, {

package/esm/chart/bar/BarChart.js

@@ -1,12 +1,12 @@
 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", "id"],
-  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "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 { defaultStackId } from '../utils';
+import { defaultStackId, withBaselineDomain } 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) => {
@@ -57,6 +57,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       domain: xDomain,
       domainLimit: xDomainLimit,
       range: xRange,
+      baseline: xBaseline,
       id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
@@ -68,38 +69,29 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       domain: yDomain,
       domainLimit: yDomainLimit,
       range: yRange,
+      baseline: yBaseline,
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  const hasNegativeValues = useMemo(() => {
-    if (!series) return false;
-    return series.some(s => {
-      var _s$data;
-      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 valueAxisBaseline = isHorizontalLayout ? xBaseline : yBaseline;
   const xAxisConfig = useMemo(() => ({
     scaleType: xScaleType != null ? xScaleType : defaultXScaleType,
     data: xData,
     categoryPadding: xCategoryPadding,
-    domain: isHorizontalLayout && !hasNegativeValues ? _extends({
-      min: 0
-    }, xDomain) : xDomain,
+    domain: isHorizontalLayout ? withBaselineDomain(xDomain, valueAxisBaseline) : xDomain,
     domainLimit: xDomainLimit,
-    range: xRange
-  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontalLayout, hasNegativeValues, xDomain, xDomainLimit, xRange]);
-
-  // Set default min domain to 0 for bar chart, but only if there are no negative values.
+    range: xRange,
+    baseline: xBaseline
+  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontalLayout, xDomain, xDomainLimit, xRange, xBaseline, valueAxisBaseline]);
   const yAxisConfig = useMemo(() => ({
     scaleType: yScaleType != null ? yScaleType : defaultYScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: !isHorizontalLayout && !hasNegativeValues ? _extends({
-      min: 0
-    }, yDomain) : yDomain,
+    domain: !isHorizontalLayout ? withBaselineDomain(yDomain, valueAxisBaseline) : yDomain,
     domainLimit: yDomainLimit,
-    range: yRange
-  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontalLayout, hasNegativeValues, yDomain, yDomainLimit, yRange]);
+    range: yRange,
+    baseline: yBaseline
+  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontalLayout, yDomain, yDomainLimit, yRange, yBaseline, valueAxisBaseline]);
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
     inset: inset,

package/esm/chart/bar/BarStack.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
-import { EPSILON, getBars, getStackBaseline, getStackOrigin } from '../utils/bar';
+import { EPSILON, getBars, getBaselinePx, getStackOrigin } from '../utils/bar';
 import { getGradientStops } from '../utils/gradient';
 import { convertToSerializableScale } from '../utils/scale';
 import { Bar } from './Bar';
@@ -48,7 +48,11 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
   } = useCartesianChartContext();
   const xAxis = getXAxis(xAxisId);
   const yAxis = getYAxis(yAxisId);
-  const baseline = useMemo(() => getStackBaseline(valueScale, rect, layout), [rect, valueScale, layout]);
+  const baseline = useMemo(() => {
+    var _ref2;
+    return (_ref2 = layout === 'vertical' ? yAxis : xAxis) == null ? void 0 : _ref2.baseline;
+  }, [layout, yAxis, xAxis]);
+  const baselinePx = useMemo(() => getBaselinePx(valueScale, rect, layout, baseline), [rect, valueScale, layout, baseline]);
   const seriesGradients = useMemo(() => {
     return series.map(s => {
       if (!s.gradient) return;
@@ -87,6 +91,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     roundBaseline,
     layout,
     baseline,
+    baselinePx,
     stackGap,
     barMinSize,
     stackMinSize,
@@ -96,12 +101,12 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     defaultStroke,
     defaultStrokeWidth,
     defaultBarComponent
-  }), [series, seriesData, indexPos, thickness, categoryIndex, categoryValue, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, valueScale, seriesGradients, theme.color.fgPrimary, layout, borderRadius, defaultFillOpacity, defaultStroke, defaultStrokeWidth, defaultBarComponent]);
+  }), [series, seriesData, categoryIndex, categoryValue, indexPos, thickness, valueScale, seriesGradients, roundBaseline, layout, baseline, baselinePx, stackGap, barMinSize, stackMinSize, theme.color.fgPrimary, borderRadius, defaultFillOpacity, defaultStroke, defaultStrokeWidth, defaultBarComponent]);
   const stackRect = useMemo(() => {
     if (bars.length === 0) {
       return {
-        x: layout === 'vertical' ? indexPos : baseline,
-        y: layout === 'vertical' ? baseline : indexPos,
+        x: layout === 'vertical' ? indexPos : baselinePx,
+        y: layout === 'vertical' ? baselinePx : indexPos,
         width: layout === 'vertical' ? thickness : 0,
         height: layout === 'vertical' ? 0 : thickness
       };
@@ -116,14 +121,14 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       width: maxX - minX,
       height: maxY - minY
     };
-  }, [bars, baseline, indexPos, layout, thickness]);
+  }, [bars, baselinePx, indexPos, layout, thickness]);
   const stackOrigin = useMemo(() => {
     var _getStackOrigin;
     return (_getStackOrigin = getStackOrigin(bars.map(b => b.origin), bars.map(b => {
       var _b$minSize;
       return (_b$minSize = b.minSize) != null ? _b$minSize : 0;
-    }))) != null ? _getStackOrigin : baseline;
-  }, [bars, baseline]);
+    }))) != null ? _getStackOrigin : baselinePx;
+  }, [bars, baselinePx]);
   const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
     BarComponent: bar.BarComponent,
     borderRadius: bar.borderRadius,
@@ -147,8 +152,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
   }, bar.seriesId + "-" + categoryIndex + "-" + index));
   const edge = layout === 'vertical' ? stackRect.y : stackRect.x;
   const size = layout === 'vertical' ? stackRect.height : stackRect.width;
-  const stackRoundLower = roundBaseline || Math.abs(edge - baseline) >= EPSILON;
-  const stackRoundHigher = roundBaseline || Math.abs(edge + size - baseline) >= EPSILON;
+  const stackRoundLower = roundBaseline || Math.abs(edge - baselinePx) >= EPSILON;
+  const stackRoundHigher = roundBaseline || Math.abs(edge + size - baselinePx) >= EPSILON;
   const stackRoundTop = layout === 'vertical' ? stackRoundLower : stackRoundHigher;
   const stackRoundBottom = layout === 'vertical' ? stackRoundHigher : stackRoundLower;
   return /*#__PURE__*/_jsx(BarStackComponent, {