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

package/esm/chart/scrubber/__stories__/Scrubber.stories.js

@@ -1,5 +1,6 @@
 const _excluded = ["seriesId", "color", "label"],
-  _excluded2 = ["seriesId", "color", "label"];
+  _excluded2 = ["seriesId", "color", "label"],
+  _excluded3 = ["seriesId", "color"];
 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; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -17,11 +18,15 @@ import { getLineData, unwrapAnimatedValue, useScrubberContext } from '../../util
 import { DefaultScrubberBeacon, DefaultScrubberBeaconLabel, DefaultScrubberLabel, Scrubber } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sampleData = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+const chartAccessibilityLabel = "Price chart with " + sampleData.length + " data points. Swipe to navigate.";
+const getScrubberAccessibilityLabel = index => "Point " + (index + 1) + ": " + sampleData[index];
 const BasicScrubber = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -47,26 +52,35 @@ const BasicScrubber = () => {
     })
   });
 };
+const seriesFilterData = {
+  top: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
+  upperMiddle: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+  lowerMiddle: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+  bottom: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14]
+};
 const SeriesFilter = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": top " + seriesFilterData.top[index] + ", lowerMiddle " + seriesFilterData.lowerMiddle[index], []);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Chart with multiple series. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'top',
-      data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38]
+      data: seriesFilterData.top
     }, {
       id: 'upperMiddle',
-      data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+      data: seriesFilterData.upperMiddle,
       color: '#ef4444',
       type: 'dotted'
     }, {
       id: 'lowerMiddle',
-      data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+      data: seriesFilterData.lowerMiddle,
       color: '#f59e0b',
       curve: 'natural'
     }, {
       id: 'bottom',
-      data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
+      data: seriesFilterData.bottom,
       color: '#800080',
       curve: 'step',
       showArea: true
@@ -80,6 +94,8 @@ const WithLabels = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -96,6 +112,8 @@ const IdlePulse = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -114,6 +132,8 @@ const ImperativePulse = () => {
     children: [/*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       series: [{
         id: 'prices',
@@ -144,6 +164,8 @@ const BeaconStroke = () => {
     children: /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       series: [{
         id: 'prices',
@@ -171,6 +193,8 @@ const CustomBeacon = () => {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -248,7 +272,9 @@ const CustomBeaconLabel = () => {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: "Temperature chart with 6 data points. Swipe to navigate.",
     areaType: "dotted",
+    getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [25, 30, 35, 45, 60, 100][index] + "\xB0F",
     height: 150,
     series: [{
       id: 'Boston',
@@ -371,7 +397,9 @@ const PercentageBeaconLabels = () => {
       children: /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: "NYC vs ATL comparison chart. Swipe to navigate.",
         areaType: "dotted",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1),
         height: 150,
         inset: {
           bottom: 8,
@@ -409,7 +437,9 @@ const PercentageBeaconLabels = () => {
       children: /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: "NYC vs ATL comparison chart. Swipe to navigate.",
         areaType: "dotted",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1),
         height: 150,
         inset: {
           bottom: 8,
@@ -448,6 +478,8 @@ const HideBeaconLabels = () => {
     enableScrubbing: true,
     legend: true,
     showArea: true,
+    accessibilityLabel: "Website visitors across 7 pages. Swipe to navigate.",
+    getScrubberAccessibilityLabel: index => "Page " + (index + 1) + ": " + [2400, 1398, 9800, 3908, 4800, 3800, 4300][index] + " views",
     height: 200,
     inset: {
       top: 60
@@ -474,6 +506,8 @@ const LabelElevated = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 60
@@ -507,6 +541,8 @@ const CustomLabelComponent = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 16,
@@ -522,11 +558,15 @@ const CustomLabelComponent = () => {
     })
   });
 };
+const ethData = [5, 15, 18, 30, 65, 30, 15, 35, 15, 2, 45, 12, 15, 40];
 const LabelFonts = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Day " + (index + 1) + ": BTC " + sampleData[index] + ", ETH " + ethData[index], []);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: "BTC and ETH comparison chart. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'btc',
@@ -535,7 +575,7 @@ const LabelFonts = () => {
       color: assets.btc.color
     }, {
       id: 'eth',
-      data: [5, 15, 18, 30, 65, 30, 15, 35, 15, 2, 45, 12, 15, 40],
+      data: ethData,
       label: 'ETH',
       color: assets.eth.color
     }],
@@ -555,6 +595,8 @@ const LabelBoundsInset = () => {
     children: [/*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       inset: {
         left: 0,
@@ -571,6 +613,8 @@ const LabelBoundsInset = () => {
     }), /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       inset: {
         left: 0,
@@ -596,6 +640,8 @@ const CustomLine = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -628,6 +674,8 @@ const HiddenScrubberWhenIdle = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -644,6 +692,8 @@ const HideOverlay = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -654,6 +704,139 @@ const HideOverlay = () => {
     })
   });
 };
+const matchupBlueData = [47, 50, 51, 52, 53, 53, 53, 53, 52, 51, 51, 52, 53, 55, 57, 58, 59, 61, 63, 65, 64, 64, 64, 64, 64, 63, 63, 63, 64, 66, 68, 70, 71, 72, 74, 76, 76, 75, 74, 73, 74, 75, 75, 78];
+const matchupRedData = matchupBlueData.map(value => 100 - value);
+const matchupTeamLabels = {
+  blue: 'BLUE',
+  red: 'RED'
+};
+const MatchupBeaconLabels = () => {
+  const theme = useTheme();
+  const MatchupScrubberBeaconLabel = /*#__PURE__*/memo(_ref7 => {
+    var _matchupTeamLabels$se;
+    let {
+        seriesId,
+        color
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded3);
+    const {
+      getSeriesData,
+      series,
+      fontProvider
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const seriesData = useMemo(() => getLineData(getSeriesData(seriesId)), [getSeriesData, seriesId]);
+    const dataLength = useMemo(() => {
+      var _series$reduce3;
+      return (_series$reduce3 = series == null ? void 0 : series.reduce((max, currentSeries) => {
+        var _data$length3;
+        const data = getSeriesData(currentSeries.id);
+        return Math.max(max, (_data$length3 = data == null ? void 0 : data.length) != null ? _data$length3 : 0);
+      }, 0)) != null ? _series$reduce3 : 0;
+    }, [series, getSeriesData]);
+    const dataIndex = useDerivedValue(() => {
+      var _scrubberPosition$val3;
+      return (_scrubberPosition$val3 = scrubberPosition.value) != null ? _scrubberPosition$val3 : Math.max(0, dataLength - 1);
+    }, [scrubberPosition, dataLength]);
+    const teamLabel = (_matchupTeamLabels$se = matchupTeamLabels[seriesId]) != null ? _matchupTeamLabels$se : String(seriesId).toUpperCase();
+    const labelColor = color != null ? color : theme.color.fgPrimary;
+    const legalFontSize = theme.fontSize.legal;
+    const title3FontSize = theme.fontSize.title3;
+    const teamStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: legalFontSize,
+      fontStyle: {
+        weight: FontWeight.Normal
+      },
+      color: Skia.Color(labelColor)
+    }), [labelColor, legalFontSize]);
+    const percentageStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: title3FontSize,
+      fontStyle: {
+        weight: FontWeight.Bold
+      },
+      color: Skia.Color(labelColor)
+    }), [title3FontSize, labelColor]);
+    const matchupLabel = useDerivedValue(() => {
+      if (seriesData === undefined) {
+        return teamLabel;
+      }
+      const value = seriesData[dataIndex.value];
+      const builder = Skia.ParagraphBuilder.Make({
+        textAlign: TextAlign.Left
+      }, fontProvider);
+      builder.pushStyle(teamStyle);
+      builder.addText(teamLabel);
+      builder.addText('\n');
+      builder.pushStyle(percentageStyle);
+      builder.addText(value + "%");
+      const paragraph = builder.build();
+      paragraph.layout(240);
+      return paragraph;
+    }, [dataIndex, fontProvider, percentageStyle, seriesData, teamLabel, teamStyle]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
+      background: "transparent",
+      color: labelColor,
+      elevated: false,
+      inset: 0,
+      label: matchupLabel,
+      seriesId: seriesId
+    }));
+  });
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": BLUE " + matchupBlueData[index] + "%, RED " + matchupRedData[index] + "%", []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: "BLUE vs RED matchup chart. Swipe to navigate.",
+    areaType: "dotted",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 300,
+    inset: {
+      bottom: 8,
+      left: 8,
+      top: 8,
+      right: 0
+    },
+    series: [{
+      id: 'blue',
+      data: matchupBlueData,
+      color: "rgb(" + theme.spectrum.blue50 + ")",
+      label: 'BLUE'
+    }, {
+      id: 'red',
+      data: matchupRedData,
+      color: "rgb(" + theme.spectrum.red50 + ")",
+      label: 'RED'
+    }],
+    xAxis: {
+      range: _ref8 => {
+        let {
+          min,
+          max
+        } = _ref8;
+        return {
+          min,
+          max: max - 64
+        };
+      }
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      idlePulse: true,
+      BeaconLabelComponent: MatchupScrubberBeaconLabel,
+      beaconLabelHorizontalOffset: 16,
+      beaconLabelPreferredSide: "right"
+    })
+  });
+};
 const ExampleNavigator = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const examples = useMemo(() => [{
@@ -707,6 +890,9 @@ const ExampleNavigator = () => {
   }, {
     title: 'Hide Overlay',
     component: /*#__PURE__*/_jsx(HideOverlay, {})
+  }, {
+    title: 'Matchup Beacon Labels',
+    component: /*#__PURE__*/_jsx(MatchupBeaconLabels, {})
   }], []);
   const currentExample = examples[currentIndex];
   const isFirstExample = currentIndex === 0;

package/esm/chart/utils/axis.js

@@ -47,7 +47,7 @@ export const toPointAnchor = placement => {
  */
 
 /**
- * Gets a D3 scale based on the axis configuration.
+ * Gets a D3 scale based on the cartesian axis configuration.
  * Handles both numeric (linear/log) and categorical (band) scales.
  *
  * For numeric scales, the domain limit controls whether bounds are "nice" (human-friendly)
@@ -57,19 +57,27 @@ export const toPointAnchor = placement => {
  * @returns The D3 scale function
  * @throws An Error if bounds are invalid
  */
-export const getAxisScale = _ref => {
+export const getCartesianAxisScale = _ref => {
   var _config$scaleType;
   let {
     config,
     type,
     range,
-    dataDomain
+    dataDomain,
+    layout = 'vertical'
   } = _ref;
   const scaleType = (_config$scaleType = config == null ? void 0 : config.scaleType) != null ? _config$scaleType : 'linear';
   let adjustedRange = range;
 
-  // Invert range for Y axis for SVG coordinate system
-  if (type === 'y') {
+  // Determine if this axis needs range inversion for SVG coordinate system.
+  // SVG Y coordinates increase downward, so we need to invert for value axes
+  // where we want higher values at the top.
+  //
+  // For vertical layout: Y axis is the value axis -> invert (higher values at top)
+  // For horizontal layout: Y axis is the category axis -> don't invert (first category at top is natural)
+  // X axis never needs inversion (left-to-right is natural for both layouts)
+  const shouldInvertRange = type === 'y' && layout !== 'horizontal';
+  if (shouldInvertRange) {
     adjustedRange = {
       min: adjustedRange.max,
       max: adjustedRange.min
@@ -121,6 +129,8 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
     defaultScaleType = defaultAxisScaleType;
   }
   const defaultDomainLimit = type === 'x' ? 'strict' : 'nice';
+  const axisName = type === 'x' ? 'x-axis' : 'y-axis';
+  const axisDocUrl = type === 'x' ? 'https://cds.coinbase.com/components/charts/XAxis' : 'https://cds.coinbase.com/components/charts/YAxis';
   if (!axes) {
     return [{
       id: defaultId,
@@ -137,16 +147,27 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
       } = _ref2;
       return id === undefined;
     })) {
-      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/charts/YAxis/#multiple-y-axes.');
+      throw new Error("When defining multiple " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
     }
-    return axes.map(_ref3 => {
+    if (axesLength > 1) {
+      const ids = axes.map(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id;
+      }).filter(id => id !== undefined);
+      if (new Set(ids).size !== ids.length) {
+        throw new Error("When defining multiple " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
+      }
+    }
+    return axes.map(_ref4 => {
       let {
           id
-        } = _ref3,
-        axis = _objectWithoutPropertiesLoose(_ref3, _excluded);
+        } = _ref4,
+        axis = _objectWithoutPropertiesLoose(_ref4, _excluded);
       return _extends({
         // defaults the axis id if only a single axis is provided
-        id: axesLength > 1 ? id != null ? id : defaultAxisId : id,
+        id: axesLength > 1 ? id != null ? id : defaultAxisId : id != null ? id : defaultId,
         scaleType: defaultScaleType,
         domainLimit: defaultDomainLimit
       }, axis);
@@ -168,10 +189,14 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
  * @param axisParam - The axis configuration
  * @param series - Array of series objects (for stacking support)
  * @param axisType - Whether this is an 'x' or 'y' axis
+ * @param layout - The chart layout orientation
  * @returns The calculated axis bounds
  */
-export const getAxisDomain = (axisParam, series, axisType) => {
+export const getCartesianAxisDomain = function (axisParam, series, axisType, layout) {
   var _finalDomain$min, _finalDomain$max;
+  if (layout === void 0) {
+    layout = 'vertical';
+  }
   let dataDomain = null;
   if (axisParam.data && Array.isArray(axisParam.data) && axisParam.data.length > 0) {
     const firstItem = axisParam.data[0];
@@ -193,7 +218,10 @@ export const getAxisDomain = (axisParam, series, axisType) => {
   }
 
   // Calculate domain from series data
-  const seriesDomain = axisType === 'x' ? getChartDomain(series) : getChartRange(series);
+  // In vertical layout: X is category (index), Y is value (value)
+  // In horizontal layout: Y is category (index), X is value (value)
+  const isCategoryAxis = layout !== 'horizontal' && axisType === 'x' || layout === 'horizontal' && axisType === 'y';
+  const seriesDomain = isCategoryAxis ? getChartDomain(series) : getChartRange(series);
 
   // If data sets the domain, use that instead of the series domain
   const preferredDataDomain = dataDomain != null ? dataDomain : seriesDomain;
@@ -487,7 +515,7 @@ const generateEvenlyDistributedTicks = (scale, tickInterval, possibleTickValues,
  * });
  * // Returns tick positions centered in each selected band
  */
-export const getAxisTicksData = _ref4 => {
+export const getAxisTicksData = _ref5 => {
   var _options$anchor;
   let {
     ticks,
@@ -497,7 +525,7 @@ export const getAxisTicksData = _ref4 => {
     possibleTickValues,
     tickInterval,
     options
-  } = _ref4;
+  } = _ref5;
   const anchor = (_options$anchor = options == null ? void 0 : options.anchor) != null ? _options$anchor : 'middle';
 
   // Handle band scales

package/esm/chart/utils/bar.js

@@ -6,7 +6,8 @@ import { defaultTransition } from './transition';
 /**
  * A bar-specific transition that extends Transition with stagger support.
  * When `staggerDelay` is provided, bars will animate with increasing delays
- * based on their horizontal position (leftmost starts first, rightmost last).
+ * based on their position along the category axis (vertical: left-to-right,
+ * horizontal: top-to-bottom).
  *
  * @example
  * // Bars stagger in from left to right over 250ms, each animating for 750ms
@@ -17,10 +18,10 @@ import { defaultTransition } from './transition';
  * Strips `staggerDelay` from a transition and computes a positional delay.
  *
  * @param transition - The transition config (may include staggerDelay)
- * @param normalizedX - The bar's normalized x position (0 = left edge, 1 = right edge)
+ * @param normalizedPosition - The bar's normalized position along the category axis (0–1)
  * @returns A standard Transition with computed delay
  */
-export const withStaggerDelayTransition = (transition, normalizedX) => {
+export const withStaggerDelayTransition = (transition, normalizedPosition) => {
   var _baseTransition$delay;
   if (!transition) return null;
   const {
@@ -29,7 +30,7 @@ export const withStaggerDelayTransition = (transition, normalizedX) => {
     baseTransition = _objectWithoutPropertiesLoose(transition, _excluded);
   if (!staggerDelay) return transition;
   return _extends({}, baseTransition, {
-    delay: ((_baseTransition$delay = baseTransition == null ? void 0 : baseTransition.delay) != null ? _baseTransition$delay : 0) + normalizedX * staggerDelay
+    delay: ((_baseTransition$delay = baseTransition == null ? void 0 : baseTransition.delay) != null ? _baseTransition$delay : 0) + normalizedPosition * staggerDelay
   });
 };
 

package/esm/chart/utils/chart.js

@@ -46,15 +46,16 @@ export const getChartDomain = (series, min, max) => {
 };
 
 /**
- * Creates a composite stack key that includes both stack ID and y-axis ID.
- * This ensures series with different y-scales don't get stacked together.
+ * Creates a composite stack key that includes stack ID and axis IDs.
+ * This ensures series with different scales don't get stacked together.
  */
 const createStackKey = series => {
   if (series.stackId === undefined) return undefined;
 
-  // Include y-axis ID to prevent cross-scale stacking
+  // Include axis IDs to prevent cross-scale stacking
+  const xAxisId = series.xAxisId || 'default';
   const yAxisId = series.yAxisId || 'default';
-  return series.stackId + ":" + yAxisId;
+  return series.stackId + ":" + xAxisId + ":" + yAxisId;
 };
 
 /**
@@ -225,12 +226,24 @@ export const getChartRange = (series, min, max) => {
   }
   return range;
 };
-export const defaultChartInset = {
+export const defaultVerticalLayoutChartInset = {
   top: 32,
   left: 16,
   bottom: 16,
   right: 16
 };
+export const defaultHorizontalLayoutChartInset = {
+  top: 16,
+  left: 16,
+  bottom: 16,
+  right: 48
+};
+
+/**
+ * @deprecated Use `defaultVerticalLayoutChartInset` for vertical layout charts or
+ * `defaultHorizontalLayoutChartInset` for horizontal layout charts.
+ */
+export const defaultChartInset = defaultVerticalLayoutChartInset;
 
 /**
  * Normalize padding to include all sides with a value.

package/esm/chart/utils/context.js

@@ -1,5 +1,12 @@
 import { createContext, useContext } from 'react';
 
+/**
+ * Chart layout for Cartesian charts.
+ * Describes the direction bars/areas grow.
+ * - 'vertical': Bars grow vertically (up/down). X is category axis, Y is value axis.
+ * - 'horizontal': Bars grow horizontally (left/right). Y is category axis, X is value axis.
+ */
+
 /**
  * Context value for Cartesian (X/Y) coordinate charts.
  * Contains axis-specific methods and properties for rectangular coordinate systems.

package/esm/chart/utils/gradient.js

@@ -262,9 +262,13 @@ export const getBaseline = function (axisBounds, baseline) {
  * @param fill - The color to use for the gradient
  * @param peakOpacity - Opacity at the peak of the gradient
  * @param baselineOpacity - Opacity at the baseline
- * @returns A gradient definition with y-axis stops in ascending order
+ * @param axis - The axis the gradient maps to ('y' for vertical, 'x' for horizontal layout)
+ * @returns A gradient definition with stops in ascending order
  */
-export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, baselineOpacity) => {
+export const createGradient = function (axisBounds, baselineValue, fill, peakOpacity, baselineOpacity, axis) {
+  if (axis === void 0) {
+    axis = 'y';
+  }
   const {
     min,
     max
@@ -273,7 +277,7 @@ export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, bas
   const upperBound = Math.max(min, max);
   if (lowerBound < baselineValue && baselineValue < upperBound) {
     return {
-      axis: 'y',
+      axis,
       stops: [{
         offset: lowerBound,
         color: fill,
@@ -291,7 +295,7 @@ export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, bas
   }
   const peakValue = Math.abs(min - baselineValue) > Math.abs(max - baselineValue) ? min : max;
   return {
-    axis: 'y',
+    axis,
     stops: [{
       offset: peakValue,
       color: fill,