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

package/esm/chart/area/Area.js

@@ -21,33 +21,42 @@ export const Area = /*#__PURE__*/memo(_ref => {
     animate
   } = _ref;
   const {
+    layout,
     getSeries,
     getSeriesData,
     getXScale,
     getYScale,
-    getXAxis
+    getXAxis,
+    getYAxis
   } = useCartesianChartContext();
   const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
   const gradient = useMemo(() => gradientProp != null ? gradientProp : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
   const fill = useMemo(() => fillProp != null ? fillProp : matchedSeries == null ? void 0 : matchedSeries.color, [fillProp, matchedSeries == null ? void 0 : matchedSeries.color]);
   const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
-  const xAxis = getXAxis();
-  const xScale = getXScale();
+  const xAxis = getXAxis(matchedSeries == null ? void 0 : matchedSeries.xAxisId);
+  const xScale = getXScale(matchedSeries == null ? void 0 : matchedSeries.xAxisId);
   const yScale = getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
+  const yAxis = getYAxis(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxis = useMemo(() => {
+    return categoryAxisIsX ? xAxis : yAxis;
+  }, [categoryAxisIsX, xAxis, yAxis]);
   const area = useMemo(() => {
     if (!sourceData || sourceData.length === 0 || !xScale || !yScale) return '';
-
-    // Get numeric x-axis data if available
-    const xData = xAxis != null && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+    const indexData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
     return getAreaPath({
       data: sourceData,
       xScale,
       yScale,
       curve,
-      xData,
-      connectNulls
+      xData: categoryAxisIsX ? indexData : undefined,
+      yData: !categoryAxisIsX ? indexData : undefined,
+      connectNulls,
+      layout
     });
-  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data, connectNulls]);
+  }, [sourceData, xScale, yScale, curve, categoryAxis, categoryAxisIsX, connectNulls, layout]);
   const AreaComponent = useMemo(() => {
     if (AreaComponentProp) {
       return AreaComponentProp;
@@ -72,6 +81,7 @@ export const Area = /*#__PURE__*/memo(_ref => {
     gradient: gradient,
     transition: transition,
     transitions: transitions,
+    xAxisId: matchedSeries == null ? void 0 : matchedSeries.xAxisId,
     yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,15 +1,15 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+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"],
-  _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId"],
-  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType"];
+  _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); }
 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 { Line } from '../line/Line';
-import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { defaultStackId } 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) => {
@@ -22,6 +22,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       type,
       connectNulls,
       transition,
+      transitions,
       LineComponent,
       strokeWidth,
       showXAxis,
@@ -34,8 +35,6 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       children
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
     return series == null ? void 0 : series.map(s => ({
@@ -44,6 +43,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       label: s.label,
       color: s.color,
       gradient: s.gradient,
+      xAxisId: s.xAxisId,
       yAxisId: s.yAxisId,
       stackId: s.stackId
     }));
@@ -67,7 +67,8 @@ export const AreaChart = /*#__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 || {},
@@ -110,11 +111,13 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
   };
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
-    inset: calculatedInset,
+    inset: inset,
     series: seriesToRender,
     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)), series == null ? void 0 : series.map(_ref4 => {
       let {
@@ -128,13 +131,14 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         fillOpacity: fillOpacity,
         seriesId: id,
         transition: transition,
+        transitions: transitions,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series == null ? void 0 : series.map(_ref5 => {
       let {
-          id,
+          id
+
           // Area type (don't pass to Line)
-          lineType: seriesLineType
         } = _ref5,
         otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _extends({
@@ -144,7 +148,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         seriesId: id,
         strokeWidth: strokeWidth,
         transition: transition,
-        type: seriesLineType != null ? seriesLineType : lineType
+        transitions: transitions,
+        type: lineType
       }, otherPropsFromSeries), id);
     })), children]
   }));

package/esm/chart/area/DottedArea.js

@@ -1,15 +1,15 @@
-const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transitions", "transition"];
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "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';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group, Skia } from '@shopify/react-native-skia';
+import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { createGradient, getBaseline } from '../utils';
 import { getDottedAreaPath } from '../utils/path';
-import { usePathTransition } from '../utils/transition';
+import { defaultTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A customizable dotted area gradient component.
@@ -25,6 +25,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate: animateProp,
@@ -36,10 +37,17 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
   const {
     drawingArea,
     animate,
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
-  const yAxisConfig = getYAxis(yAxisId);
+  const shouldAnimate = animateProp != null ? animateProp : animate;
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const updateTransition = useMemo(() => {
+    return (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition !== undefined ? transition : defaultTransition;
+  }, [transitions == null ? void 0 : transitions.update, transition]);
   const dottedPath = useMemo(() => {
     if (!drawingArea) return '';
     return getDottedAreaPath({
@@ -49,27 +57,24 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       height: drawingArea.height
     }, patternSize, dotSize);
   }, [drawingArea, patternSize, dotSize]);
-  const animatedClipPath = usePathTransition({
+  const clipPath = usePathTransition({
     currentPath: d,
     transitions: {
-      update: transition
+      update: shouldAnimate ? updateTransition : null
     }
   });
-  const staticClipPath = useMemo(() => {
-    var _Skia$Path$MakeFromSV;
-    if (!d) return;
-    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined;
-  }, [d]);
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
-    if (!yAxisConfig) return;
-    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
-    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
-  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, baseline, peakOpacity, baselineOpacity, gradientAxis]);
+
+  // Update transition is used for clip path, we skip update animation on Path itself
   return /*#__PURE__*/_jsx(Group, {
-    clip: animate ? animatedClipPath : staticClipPath,
+    clip: clipPath,
     children: /*#__PURE__*/_jsx(Path, _extends({
-      animate: animateProp != null ? animateProp : animate,
+      animate: shouldAnimate,
       d: dottedPath,
       fill: fill,
       transition: transition,
@@ -77,6 +82,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
     }, pathProps, {
       children: gradient && /*#__PURE__*/_jsx(Gradient, {
         gradient: gradient,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }))

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "transitions", "transition"];
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "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';
@@ -22,6 +22,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       animate,
       transitions,
@@ -29,17 +30,20 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const theme = useTheme();
-  const yAxisConfig = getYAxis(yAxisId);
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
-    if (!yAxisConfig) return;
-    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
-    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
-  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, baseline, peakOpacity, baselineOpacity, gradientAxis]);
   return /*#__PURE__*/_jsx(Path, _extends({
     animate: animate,
     d: d,
@@ -50,6 +54,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,
+      xAxisId: xAxisId,
       yAxisId: yAxisId
     })
   }));

package/esm/chart/area/SolidArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transitions", "transition", "gradient"];
+const _excluded = ["d", "fill", "fillOpacity", "xAxisId", "yAxisId", "animate", "transitions", "transition", "gradient"];
 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 } from 'react';
@@ -16,6 +16,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
       d,
       fill,
       fillOpacity = 1,
+      xAxisId,
       yAxisId,
       animate,
       transitions,
@@ -34,6 +35,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,
+      xAxisId: xAxisId,
       yAxisId: yAxisId
     })
   }));

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

@@ -59,12 +59,12 @@ const AreaChartStories = () => {
         enableScrubbing: true,
         showLines: true,
         showYAxis: true,
-        height: 400,
+        height: 150,
         series: [{
           id: 'pageViews',
           data: [24, 13, -98, 39, 48, 38, 43]
         }],
-        type: "solid",
+        type: "gradient",
         yAxis: {
           showGrid: true
         },
@@ -94,6 +94,34 @@ const AreaChartStories = () => {
           type: 'gradient'
         }]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Horizontal Layout",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showXAxis: true,
+        showYAxis: true,
+        height: 280,
+        layout: "horizontal",
+        series: [{
+          id: 'volume',
+          data: [68, 54, 43, 29, 18],
+          label: 'Volume'
+        }],
+        type: "gradient",
+        xAxis: {
+          domain: {
+            min: 0,
+            max: 80
+          },
+          tickLabelFormatter: value => value + "%"
+        },
+        yAxis: {
+          data: ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'],
+          scaleType: 'band'
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
     })]
   });
 };

package/esm/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
 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, useCallback, useEffect, useId, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
@@ -15,6 +15,7 @@ const AXIS_HEIGHT = 32;
 const LABEL_SIZE = 20;
 export const XAxis = /*#__PURE__*/memo(_ref => {
   let {
+      axisId,
       position = 'bottom',
       showGrid,
       requestedTickCount,
@@ -44,14 +45,15 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
   const {
     animate,
     drawingArea,
+    layout,
     getXScale,
     getXAxis,
     registerAxis,
     unregisterAxis,
     getAxisBounds
   } = useCartesianChartContext();
-  const xScale = getXScale();
-  const xAxis = getXAxis();
+  const xScale = getXScale(axisId);
+  const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
   useEffect(() => {
     registerAxis(registrationId, position, height);
@@ -62,15 +64,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     // If we have string labels and no custom formatter, use the labels
     const axisData = xAxis == null ? void 0 : xAxis.data;
     const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
-    let finalValue = value;
-
-    // For band scales with string data, value is an index
-    if (hasStringLabels && typeof value === 'number' && axisData[value] !== undefined) {
-      finalValue = axisData[value];
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      return axisData[value];
     }
 
-    // Use the formatter (if provided) or the value itself
-    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(finalValue)) != null ? _tickLabelFormatter : finalValue;
+    // Otherwise passes raw index to formatter
+    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(value)) != null ? _tickLabelFormatter : value;
   }, [xAxis == null ? void 0 : xAxis.data, tickLabelFormatter]);
   const ticksData = useMemo(() => {
     if (!xScale) return [];
@@ -89,27 +88,21 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       const domain = xScale.domain();
       categories = domain.map(String);
     }
-    let possibleTickValues;
-
-    // If we have discrete data, we can use the indices as possible tick values
-    if (axisData && Array.isArray(axisData) && (typeof axisData[0] === 'string' || typeof axisData[0] === 'number' && isCategoricalScale(xScale))) {
-      possibleTickValues = Array.from({
-        length: axisData.length
-      }, (_, i) => i);
-    }
     return getAxisTicksData({
       scaleFunction: xScale,
       ticks,
-      requestedTickCount,
+      requestedTickCount: requestedTickCount != null ? requestedTickCount : layout === 'horizontal' ? 5 : undefined,
       categories,
-      possibleTickValues,
+      possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'string' ? Array.from({
+        length: axisData.length
+      }, (_, i) => i) : undefined,
       tickInterval: tickInterval,
       options: {
         minStep: tickMinStep,
         maxStep: tickMaxStep
       }
     });
-  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data]);
+  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data, layout]);
   const isBandScale = useMemo(() => {
     if (!xScale) return false;
     return isCategoricalScale(xScale);

package/esm/chart/axis/YAxis.js

@@ -18,7 +18,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       axisId,
       position = 'right',
       showGrid,
-      requestedTickCount = 5,
+      requestedTickCount,
       ticks,
       tickLabelFormatter,
       TickLabelComponent = DefaultAxisTickLabel,
@@ -43,6 +43,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
   const {
     animate,
     drawingArea,
+    layout,
     getYScale,
     getYAxis,
     registerAxis,
@@ -94,12 +95,12 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     return getAxisTicksData({
       scaleFunction: yScale,
       ticks,
-      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount != null ? requestedTickCount : 5,
+      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount != null ? requestedTickCount : layout === 'horizontal' ? undefined : 5,
       categories,
       possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'number' ? axisData : undefined,
       tickInterval: tickInterval
     });
-  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? void 0 : yAxis.data]);
+  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? void 0 : yAxis.data, layout]);
   const isBandScale = useMemo(() => {
     if (!yScale) return false;
     return isCategoricalScale(yScale);

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,