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

package/esm/chart/CartesianChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "className", "classNames", "style", "styles", "accessibilityLabel"];
+const _excluded = ["series", "children", "layout", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "className", "classNames", "style", "styles", "accessibilityLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -13,13 +13,14 @@ import { Box } from '@coinbase/cds-web/layout';
 import { ScrubberProvider } from './scrubber/ScrubberProvider';
 import { CartesianChartProvider } from './ChartProvider';
 import { Legend } from './legend';
-import { defaultAxisId, defaultChartInset, getAxisConfig, getAxisDomain, getAxisRange, getAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { defaultAxisId, defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const focusStylesCss = "cds-focusStylesCss-f4oy7ru";
 export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       series,
       children,
+      layout = 'vertical',
       animate = true,
       xAxis: xAxisConfigProp,
       yAxis: yAxisConfigProp,
@@ -44,12 +45,20 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     height: chartHeight
   } = useDimensions();
   const svgRef = useRef(null);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
+  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
 
   // Axis configs store the properties of each axis, such as id, scale type, domain limit, etc.
-  // We only support 1 x axis but allow for multiple y axes.
-  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp), [xAxisConfigProp]);
   const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
+
+  // Horizontal layout supports multiple value axes on x, but only a single category axis on y.
+  // Vertical layout keeps a single x-axis to preserve existing behavior.
+  if (layout === 'horizontal' && yAxisConfig.length > 1) {
+    throw new Error('When layout="horizontal", only one y-axis is supported. See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  if (layout !== 'horizontal' && xAxisConfig.length > 1) {
+    throw new Error('Multiple x-axes are only supported when layout="horizontal". See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
   const {
     renderedAxes,
     registerAxis,
@@ -79,50 +88,64 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     };
   }, [chartHeight, chartWidth, calculatedInset, axisPadding]);
   const {
-    xAxis,
-    xScale
+    xAxes,
+    xScales
   } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
     if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
-      xAxis: undefined,
-      xScale: undefined
-    };
-    const domain = getAxisDomain(xAxisConfig, series !== null && series !== void 0 ? series : [], 'x');
-    const range = getAxisRange(xAxisConfig, chartRect, 'x');
-    const axisConfig = {
-      scaleType: xAxisConfig.scaleType,
-      domain,
-      range,
-      data: xAxisConfig.data,
-      categoryPadding: xAxisConfig.categoryPadding,
-      domainLimit: xAxisConfig.domainLimit
+      xAxes: axes,
+      xScales: scales
     };
+    xAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
 
-    // Create the scale
-    const scale = getAxisScale({
-      config: axisConfig,
-      type: 'x',
-      range: axisConfig.range,
-      dataDomain: axisConfig.domain
-    });
-    if (!scale) return {
-      xAxis: undefined,
-      xScale: undefined
-    };
+      // Get relevant series data
+      const relevantSeries = xAxisConfig.length > 1 ? (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => {
+        var _s$xAxisId;
+        return ((_s$xAxisId = s.xAxisId) !== null && _s$xAxisId !== void 0 ? _s$xAxisId : defaultAxisId) === axisId;
+      })) !== null && _series$filter !== void 0 ? _series$filter : [] : series !== null && series !== void 0 ? series : [];
 
-    // Update axis config with actual scale domain (after .nice() or other adjustments)
-    const scaleDomain = scale.domain();
-    const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
-      min: scaleDomain[0],
-      max: scaleDomain[1]
-    } : axisConfig.domain;
-    const finalAxisConfig = _objectSpread(_objectSpread({}, axisConfig), {}, {
-      domain: actualDomain
+      // Calculate domain and range
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'x', layout);
+      const range = getAxisRange(axisParam, chartRect, 'x');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : layout === 'horizontal' ? 'nice' : 'strict'
+      };
+
+      // Create the scale
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'x',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _objectSpread(_objectSpread({}, axisConfig), {}, {
+          domain: actualDomain
+        }));
+      }
     });
     return {
-      xAxis: finalAxisConfig,
-      xScale: scale
+      xAxes: axes,
+      xScales: scales
     };
-  }, [xAxisConfig, series, chartRect]);
+  }, [xAxisConfig, series, chartRect, layout]);
   const {
     yAxes,
     yScales
@@ -134,17 +157,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       yScales: scales
     };
     yAxisConfig.forEach(axisParam => {
-      var _axisParam$id, _series$filter, _axisParam$domainLimi;
-      const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
+      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
+      const axisId = (_axisParam$id2 = axisParam.id) !== null && _axisParam$id2 !== void 0 ? _axisParam$id2 : defaultAxisId;
 
       // Get relevant series data
-      const relevantSeries = (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => {
+      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series === null || series === void 0 ? void 0 : series.filter(s => {
         var _s$yAxisId;
         return ((_s$yAxisId = s.yAxisId) !== null && _s$yAxisId !== void 0 ? _s$yAxisId : defaultAxisId) === axisId;
-      })) !== null && _series$filter !== void 0 ? _series$filter : [];
+      })) !== null && _series$filter2 !== void 0 ? _series$filter2 : [] : series !== null && series !== void 0 ? series : [];
 
       // Calculate domain and range
-      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
       const range = getAxisRange(axisParam, chartRect, 'y');
       const axisConfig = {
         scaleType: axisParam.scaleType,
@@ -152,15 +175,16 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
-        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : 'nice'
+        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) !== null && _axisParam$domainLimi2 !== void 0 ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice'
       };
 
       // Create the scale
-      const scale = getAxisScale({
+      const scale = getCartesianAxisScale({
         config: axisConfig,
         type: 'y',
         range: axisConfig.range,
-        dataDomain: axisConfig.domain
+        dataDomain: axisConfig.domain,
+        layout
       });
       if (scale) {
         scales.set(axisId, scale);
@@ -180,10 +204,10 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       yAxes: axes,
       yScales: scales
     };
-  }, [yAxisConfig, series, chartRect]);
-  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  }, [yAxisConfig, series, chartRect, layout]);
+  const getXAxis = useCallback(id => xAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [xAxes]);
   const getYAxis = useCallback(id => yAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [yAxes]);
-  const getXScale = useCallback(() => xScale, [xScale]);
+  const getXScale = useCallback(id => xScales.get(id !== null && id !== void 0 ? id : defaultAxisId), [xScales]);
   const getYScale = useCallback(id => yScales.get(id !== null && id !== void 0 ? id : defaultAxisId), [yScales]);
   const getSeries = useCallback(seriesId => series === null || series === void 0 ? void 0 : series.find(s => s.id === seriesId), [series]);
   const stackedDataMap = useMemo(() => {
@@ -194,10 +218,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     if (!seriesId) return undefined;
     return stackedDataMap.get(seriesId);
   }, [stackedDataMap]);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxisConfig = useMemo(() => {
+    var _xAxisConfig$, _yAxisConfig$;
+    return categoryAxisIsX ? (_xAxisConfig$ = xAxisConfig[0]) !== null && _xAxisConfig$ !== void 0 ? _xAxisConfig$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) !== null && _yAxisConfig$ !== void 0 ? _yAxisConfig$ : xAxisConfig[0];
+  }, [categoryAxisIsX, xAxisConfig, yAxisConfig]);
   const dataLength = useMemo(() => {
-    // If xAxis has categorical data, use that length
-    if (xAxisConfig.data && xAxisConfig.data.length > 0) {
-      return xAxisConfig.data.length;
+    // If category axis has categorical data, use that length
+    if (categoryAxisConfig.data && categoryAxisConfig.data.length > 0) {
+      return categoryAxisConfig.data.length;
     }
 
     // Otherwise, find the longest series
@@ -207,7 +238,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       const seriesData = getStackedSeriesData(s.id);
       return Math.max(max, (_seriesData$length = seriesData === null || seriesData === void 0 ? void 0 : seriesData.length) !== null && _seriesData$length !== void 0 ? _seriesData$length : 0);
     }, 0);
-  }, [xAxisConfig.data, series, getStackedSeriesData]);
+  }, [categoryAxisConfig, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -256,6 +287,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     }
   }, [renderedAxes, chartRect, calculatedInset]);
   const contextValue = useMemo(() => ({
+    layout,
     series: series !== null && series !== void 0 ? series : [],
     getSeries,
     getSeriesData: getStackedSeriesData,
@@ -271,7 +303,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  }), [layout, series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
   const rootClassNames = useMemo(() => cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root), [className, classNames]);
   const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
   const legendElement = useMemo(() => {

package/esm/chart/Path.js

@@ -49,6 +49,7 @@ export const Path = /*#__PURE__*/memo(_ref2 => {
   const context = useCartesianChartContext();
   const rect = clipRect !== undefined ? clipRect : context.drawingArea;
   const animate = animateProp !== null && animateProp !== void 0 ? animateProp : context.animate;
+  const clipPath = rect !== null ? "url(#".concat(clipPathId, ")") : undefined;
   const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter]);
   const updateTransition = useMemo(() => getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition]);
   const shouldAnimateClip = animate && enterTransition !== null;
@@ -58,18 +59,25 @@ export const Path = /*#__PURE__*/memo(_ref2 => {
   const totalOffset = clipOffset * 2; // Applied on both sides
 
   const clipPathAnimation = useMemo(() => {
-    if (rect === null || !shouldAnimateClip) return;
+    if (rect === null) return;
+    const categoryAxisIsX = context.layout !== 'horizontal';
+    const fullWidth = rect.width + totalOffset;
+    const fullHeight = rect.height + totalOffset;
     return {
       hidden: {
-        width: 0
+        width: categoryAxisIsX ? 0 : fullWidth,
+        height: categoryAxisIsX ? fullHeight : 0
       },
       visible: {
-        width: rect.width + totalOffset,
-        transition: enterTransition
+        width: fullWidth,
+        height: fullHeight,
+        transition: {
+          type: 'timing',
+          duration: pathEnterTransitionDuration
+        }
       }
     };
-  }, [rect, totalOffset, enterTransition, shouldAnimateClip]);
-  const clipPath = useMemo(() => rect !== null ? "url(#".concat(clipPathId, ")") : undefined, [rect, clipPathId]);
+  }, [rect, totalOffset, context.layout]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [rect !== null && /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
@@ -79,6 +87,7 @@ export const Path = /*#__PURE__*/memo(_ref2 => {
           height: rect.height + totalOffset,
           initial: "hidden",
           variants: clipPathAnimation,
+          width: rect.width + totalOffset,
           x: rect.x - clipOffset,
           y: rect.y - clipOffset
         }) : /*#__PURE__*/_jsx("rect", {

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 !== void 0 ? gradientProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient]);
   const fill = useMemo(() => fillProp !== null && fillProp !== void 0 ? fillProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color, [fillProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color]);
   const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
-  const xAxis = getXAxis();
-  const xScale = getXScale();
+  const xAxis = getXAxis(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId);
+  const xScale = getXScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId);
   const yScale = getYScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
+  const yAxis = getYAxis(matchedSeries === null || matchedSeries === void 0 ? 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 !== void 0 && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+    const indexData = categoryAxis !== null && categoryAxis !== void 0 && 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 || xAxis === void 0 ? 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 || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId,
     yAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,5 +1,5 @@
 const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transitions", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+  _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", "legendShape"],
   _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "legendShape", "type"];
@@ -14,7 +14,7 @@ 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) => {
@@ -40,8 +40,6 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       children
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
     return series === null || series === void 0 ? void 0 : series.map(s => ({
@@ -49,6 +47,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       data: s.data,
       label: s.label,
       color: s.color,
+      xAxisId: s.xAxisId,
       yAxisId: s.yAxisId,
       stackId: s.stackId,
       gradient: s.gradient
@@ -73,7 +72,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       categoryPadding: xCategoryPadding,
       domain: xDomain,
       domainLimit: xDomainLimit,
-      range: xRange
+      range: xRange,
+      id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutProperties(_ref2, _excluded2);
   const _ref3 = yAxis || {},
@@ -87,6 +87,13 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
+  const hasNegativeValues = useMemo(() => {
+    if (!series) return false;
+    return series.some(s => {
+      var _s$data;
+      return (_s$data = s.data) === null || _s$data === void 0 ? 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 = {
     scaleType: xScaleType,
     data: xData,
@@ -95,13 +102,6 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     domainLimit: xDomainLimit,
     range: xRange
   };
-  const hasNegativeValues = useMemo(() => {
-    if (!series) return false;
-    return series.some(s => {
-      var _s$data;
-      return (_s$data = s.data) === null || _s$data === void 0 ? 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 = {
@@ -116,11 +116,13 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
   };
   return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({}, chartProps), {}, {
     ref: ref,
-    inset: calculatedInset,
+    inset: inset,
     series: seriesToRender,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
       axisId: yAxisId
     }, yAxisVisualProps)), series === null || series === void 0 ? void 0 : series.map(_ref4 => {
       let {

package/esm/chart/area/DottedArea.js

@@ -1,4 +1,4 @@
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -27,6 +27,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate,
@@ -35,19 +36,22 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
   const {
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const patternId = useId();
   const gradientId = useId();
   const maskId = useId();
   const dotCenterPosition = patternSize / 2;
-  const yAxisConfig = getYAxis(yAxisId);
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   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__*/_jsxs("g", {
     children: [/*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("pattern", {
@@ -77,6 +81,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
         gradient: gradient,
         id: gradientId,
         transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })]
     }), /*#__PURE__*/_jsx(Path, _objectSpread({

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transitions", "transition"];
+const _excluded = ["d", "fill", "fillOpacity", "peakOpacity", "baselineOpacity", "baseline", "xAxisId", "yAxisId", "gradient", "animate", "transitions", "transition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -29,6 +29,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate,
@@ -37,16 +38,19 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
   const {
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const patternId = useId();
-  const yAxisConfig = getYAxis(yAxisId);
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   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__*/_jsxs(_Fragment, {
     children: [gradient && /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx(Gradient, {
@@ -54,6 +58,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
         gradient: gradient,
         id: patternId,
         transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({

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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -21,6 +21,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
       d,
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
+      xAxisId,
       yAxisId,
       animate,
       transitions,
@@ -36,6 +37,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
         gradient: gradient,
         id: patternId,
         transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({

package/esm/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -24,6 +24,7 @@ const axisTickMarkCss = "cds-axisTickMarkCss-a6j4s2q";
 const axisLineCss = "cds-axisLineCss-a12llxjj";
 export const XAxis = /*#__PURE__*/memo(_ref => {
   let {
+      axisId,
       position = 'bottom',
       showGrid,
       requestedTickCount,
@@ -56,6 +57,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
   const registrationId = useId();
   const {
     animate,
+    layout,
     getXScale,
     getXAxis,
     registerAxis,
@@ -63,8 +65,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     getAxisBounds,
     drawingArea
   } = useCartesianChartContext();
-  const xScale = getXScale();
-  const xAxis = getXAxis();
+  const xScale = getXScale(axisId);
+  const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
   useEffect(() => {
     registerAxis(registrationId, position, height);
@@ -75,15 +77,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     // If we have string labels and no custom formatter, use the labels
     const axisData = xAxis === null || xAxis === void 0 ? 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 || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(finalValue)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : finalValue;
+    // Otherwise passes raw index to formatter
+    return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(value)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : value;
   }, [xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, tickLabelFormatter]);
   const ticksData = useMemo(() => {
     if (!xScale) return [];
@@ -105,7 +104,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     return getAxisTicksData({
       scaleFunction: xScale,
       ticks,
-      requestedTickCount,
+      requestedTickCount: requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : layout === 'horizontal' ? 5 : undefined,
       categories,
       possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'string' ? Array.from({
         length: axisData.length
@@ -116,7 +115,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         maxStep: tickMaxStep
       }
     });
-  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data]);
+  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, layout]);
   const isBandScale = useMemo(() => {
     if (!xScale) return false;
     return isCategoricalScale(xScale);