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

package/esm/chart/CartesianChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "children", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable"];
+const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable"];
 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 React, { forwardRef, memo, useCallback, useMemo } from 'react';
@@ -10,7 +10,7 @@ import { convertToSerializableScale } from './utils/scale';
 import { useChartContextBridge } from './ChartContextBridge';
 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 ChartCanvas = /*#__PURE__*/memo(_ref => {
   let {
@@ -32,6 +32,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
   let {
       series,
       children,
+      layout = 'vertical',
       animate = true,
       enableScrubbing,
       xAxis: xAxisConfigProp,
@@ -57,11 +58,18 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
   const [containerLayout, onContainerLayout] = useLayout();
   const chartWidth = containerLayout.width;
   const chartHeight = containerLayout.height;
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-
-  // there can only be one x axis but the helper function always returns an array
-  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
+  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,
@@ -91,54 +99,76 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     };
   }, [chartHeight, chartWidth, totalInset]);
   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 : [], '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 : 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 ? void 0 : series.filter(s => {
+        var _s$xAxisId;
+        return ((_s$xAxisId = s.xAxisId) != null ? _s$xAxisId : defaultAxisId) === axisId;
+      })) != null ? _series$filter : [] : series != null ? series : [];
+
+      // 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 : 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;
-    const finalAxisConfig = _extends({}, axisConfig, {
-      domain: actualDomain
+        // 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, _extends({}, axisConfig, {
+          domain: actualDomain
+        }));
+      }
     });
     return {
-      xAxis: finalAxisConfig,
-      xScale: scale
+      xAxes: axes,
+      xScales: scales
     };
-  }, [xAxisConfig, series, chartRect]);
-  const xSerializableScale = useMemo(() => {
-    if (!xScale) return;
-    return convertToSerializableScale(xScale);
-  }, [xScale]);
+  }, [xAxisConfig, series, chartRect, layout]);
+
+  // We need a set of serialized scales usable in UI thread.
+  const xSerializableScales = useMemo(() => {
+    const serializableScales = new Map();
+    xScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        serializableScales.set(id, serializableScale);
+      }
+    });
+    return serializableScales;
+  }, [xScales]);
   const {
     yAxes,
     yScales
@@ -150,17 +180,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       yScales: scales
     };
     yAxisConfig.forEach(axisParam => {
-      var _axisParam$id, _series$filter, _axisParam$domainLimi;
-      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
+      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
+      const axisId = (_axisParam$id2 = axisParam.id) != null ? _axisParam$id2 : defaultAxisId;
 
-      // Get relevant series data
-      const relevantSeries = (_series$filter = series == null ? void 0 : series.filter(s => {
+      // Get relevant series data.
+      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series == null ? void 0 : series.filter(s => {
         var _s$yAxisId;
         return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
-      })) != null ? _series$filter : [];
+      })) != null ? _series$filter2 : [] : series != null ? series : [];
 
-      // Calculate domain and range
-      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
+      // Calculate domain and range.
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
       const range = getAxisRange(axisParam, chartRect, 'y');
       const axisConfig = {
         scaleType: axisParam.scaleType,
@@ -168,20 +198,21 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
-        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : 'nice'
+        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) != null ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice'
       };
 
-      // Create the scale
-      const scale = getAxisScale({
+      // Create the scale.
+      const scale = getCartesianAxisScale({
         config: axisConfig,
         type: 'y',
         range: axisConfig.range,
-        dataDomain: axisConfig.domain
+        dataDomain: axisConfig.domain,
+        layout
       });
       if (scale) {
         scales.set(axisId, scale);
 
-        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        // 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],
@@ -196,7 +227,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       yAxes: axes,
       yScales: scales
     };
-  }, [yAxisConfig, series, chartRect]);
+  }, [yAxisConfig, series, chartRect, layout]);
 
   // We need a set of serialized scales usable in UI thread
   const ySerializableScales = useMemo(() => {
@@ -209,11 +240,11 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     });
     return serializableScales;
   }, [yScales]);
-  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  const getXAxis = useCallback(id => xAxes.get(id != null ? id : defaultAxisId), [xAxes]);
   const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
-  const getXScale = useCallback(() => xScale, [xScale]);
+  const getXScale = useCallback(id => xScales.get(id != null ? id : defaultAxisId), [xScales]);
   const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
-  const getXSerializableScale = useCallback(() => xSerializableScale, [xSerializableScale]);
+  const getXSerializableScale = useCallback(id => xSerializableScales.get(id != null ? id : defaultAxisId), [xSerializableScales]);
   const getYSerializableScale = useCallback(id => ySerializableScales.get(id != null ? id : defaultAxisId), [ySerializableScales]);
   const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
   const stackedDataMap = useMemo(() => {
@@ -224,20 +255,27 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     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$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) != null ? _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
+    // Otherwise, find the longest series.
     if (!series || series.length === 0) return 0;
     return series.reduce((max, s) => {
       var _seriesData$length;
       const seriesData = getStackedSeriesData(s.id);
       return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
     }, 0);
-  }, [xAxisConfig.data, series, getStackedSeriesData]);
+  }, [categoryAxisConfig, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -290,6 +328,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     return Skia.TypefaceFontProvider.Make();
   }, [fontProviderProp]);
   const contextValue = useMemo(() => ({
+    layout,
     series: series != null ? series : [],
     getSeries,
     getSeriesData: getStackedSeriesData,
@@ -309,7 +348,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  }), [layout, series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
   const rootStyles = useMemo(() => {
     return [style, styles == null ? void 0 : styles.root];
   }, [style, styles == null ? void 0 : styles.root]);

package/esm/chart/Path.js

@@ -115,29 +115,32 @@ export const Path = /*#__PURE__*/memo(props => {
       initialClipPath: null,
       targetClipPath: null
     };
+    const categoryAxisIsX = context.layout !== 'horizontal';
+    const fullWidth = rect.width + totalOffset;
+    const fullHeight = rect.height + totalOffset;
 
-    // Initial clip path (width = 0)
+    // Initial clip path starts collapsed on the category axis.
     const initial = Skia.Path.Make();
     initial.addRect({
       x: rect.x - clipOffset,
       y: rect.y - clipOffset,
-      width: 0,
-      height: rect.height + totalOffset
+      width: categoryAxisIsX ? 0 : fullWidth,
+      height: categoryAxisIsX ? fullHeight : 0
     });
 
-    // Target clip path (full width)
+    // Target clip path is fully expanded.
     const target = Skia.Path.Make();
     target.addRect({
       x: rect.x - clipOffset,
       y: rect.y - clipOffset,
-      width: rect.width + totalOffset,
-      height: rect.height + totalOffset
+      width: fullWidth,
+      height: fullHeight
     });
     return {
       initialClipPath: initial,
       targetClipPath: target
     };
-  }, [rect, clipOffset, totalOffset]);
+  }, [rect, clipOffset, totalOffset, context.layout]);
 
   // Use usePathInterpolation for animated clip path
   const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], shouldAnimateClip && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);

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", "transitions", "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"],
-  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type"];
+  _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) => {
@@ -35,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 => ({
@@ -45,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
     }));
@@ -68,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 || {},
@@ -111,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 {

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 _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';
@@ -25,6 +25,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate: animateProp,
@@ -36,10 +37,13 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
   const {
     drawingArea,
     animate,
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const shouldAnimate = animateProp != null ? animateProp : animate;
-  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 updateTransition = useMemo(() => {
     return (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition !== undefined ? transition : defaultTransition;
@@ -61,10 +65,10 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
   });
   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, {
@@ -78,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, {})
+      })
     })]
   });
 };