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

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

@@ -1,17 +1,22 @@
+import { useCallback } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { DottedLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const basicData = [24, 13, 98, 39, 48, 38, 43];
 const BasicExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + basicData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: "Area chart with " + basicData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 400,
     series: [{
       id: 'pageViews',
-      data: [24, 13, 98, 39, 48, 38, 43]
+      data: basicData
     }],
     yAxis: {
       showGrid: true,
@@ -22,21 +27,26 @@ const BasicExample = () => {
     children: /*#__PURE__*/_jsx(Scrubber, {})
   });
 };
+const currentRewardsData = [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170];
+const potentialRewardsData = [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900];
 const StackedExample = () => {
   const theme = useTheme();
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": current " + currentRewardsData[index] + ", potential " + potentialRewardsData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showLines: true,
     stacked: true,
+    accessibilityLabel: "Stacked rewards chart with " + currentRewardsData.length + " data points. Swipe to navigate.",
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 256,
     series: [{
       id: 'currentRewards',
-      data: [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170],
+      data: currentRewardsData,
       color: theme.color.fg
     }, {
       id: 'potentialRewards',
-      data: [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900],
+      data: potentialRewardsData,
       color: theme.color.fgPositive,
       type: 'dotted',
       LineComponent: DottedLine
@@ -59,12 +69,14 @@ const AreaChartStories = () => {
         enableScrubbing: true,
         showLines: true,
         showYAxis: true,
-        height: 400,
+        accessibilityLabel: "Area chart with negative values. 7 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [24, 13, -98, 39, 48, 38, 43][index],
+        height: 150,
         series: [{
           id: 'pageViews',
           data: [24, 13, -98, 39, 48, 38, 43]
         }],
-        type: "solid",
+        type: "gradient",
         yAxis: {
           showGrid: true
         },
@@ -94,6 +106,36 @@ const AreaChartStories = () => {
           type: 'gradient'
         }]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Horizontal Layout",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showXAxis: true,
+        showYAxis: true,
+        accessibilityLabel: "Volume by asset. 5 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'][index] + ": " + [68, 54, 43, 29, 18][index] + "%",
+        height: 280,
+        layout: "horizontal",
+        series: [{
+          id: 'volume',
+          data: [68, 54, 43, 29, 18],
+          label: 'Volume'
+        }],
+        type: "gradient",
+        xAxis: {
+          domain: {
+            min: 0,
+            max: 80
+          },
+          tickLabelFormatter: value => value + "%"
+        },
+        yAxis: {
+          data: ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'],
+          scaleType: 'band'
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
     })]
   });
 };

package/esm/chart/axis/XAxis.js

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

package/esm/chart/axis/YAxis.js

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

package/esm/chart/axis/__stories__/Axis.stories.js

@@ -53,10 +53,14 @@ const Simple = () => {
   const pageViews = data.map(d => d.pv);
   const pageNames = data.map(d => d.name);
   const pageUniqueVisitors = data.map(d => d.uv);
+  const chartAccessibilityLabel = "Page views and unique visitors across " + pageNames.length + " pages. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => pageNames[index] + ": " + pageViews[index] + " views, " + pageUniqueVisitors[index] + " unique visitors", [pageNames, pageViews, pageUniqueVisitors]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     inset: 32,
     series: [{
@@ -97,8 +101,8 @@ const Simple = () => {
 };
 const TimeOfDayAxesExample = () => {
   const theme = useTheme();
-  const lineA = [5, 5, 10, 90, 85, 70, 30, 25, 25];
-  const lineB = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+  const lineA = useMemo(() => [5, 5, 10, 90, 85, 70, 30, 25, 25], []);
+  const lineB = useMemo(() => [90, 85, 70, 25, 23, 40, 45, 40, 50], []);
   const timeData = useMemo(() => [new Date(2023, 7, 31), new Date(2023, 7, 31, 12), new Date(2023, 8, 1), new Date(2023, 8, 1, 12), new Date(2023, 8, 2), new Date(2023, 8, 2, 12), new Date(2023, 8, 3), new Date(2023, 8, 3, 12), new Date(2023, 8, 4)].map(d => d.getTime()), []);
   const dateFormatter = useCallback(index => {
     return new Date(timeData[index]).toLocaleDateString('en-US', {
@@ -117,8 +121,12 @@ const TimeOfDayAxesExample = () => {
   const dateTicks = useMemo(() => {
     return timeData.map((d, index) => index).filter(d => d % 2 === 0);
   }, [timeData]);
+  const chartAccessibilityLabel = "Chart with " + lineA.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": lineA " + lineA[index] + ", lineB " + lineB[index], [lineA, lineB]);
   return /*#__PURE__*/_jsxs(LineChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'lineA',
@@ -150,51 +158,57 @@ const TimeOfDayAxesExample = () => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
-const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
-  enableScrubbing: true,
-  height: defaultChartHeight,
-  series: [{
-    id: 'linear',
-    yAxisId: 'linearAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'linear'
-  }, {
-    id: 'log',
-    yAxisId: 'logAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'log'
-  }],
-  xAxis: {
-    data: [1, 10, 30, 50, 70, 90, 100]
-  },
-  yAxis: [{
-    id: 'linearAxis',
-    scaleType: 'linear'
-  }, {
-    id: 'logAxis',
-    scaleType: 'log'
-  }],
-  children: [/*#__PURE__*/_jsx(XAxis, {
-    showLine: true,
-    showTickMarks: true
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "logAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "linearAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "linear"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "log"
-  }), /*#__PURE__*/_jsx(Scrubber, {})]
-});
+const multipleYAxesData = [1, 10, 30, 50, 70, 90, 100];
+const MultipleYAxesExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": linear " + multipleYAxesData[index] + ", log " + multipleYAxesData[index], []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Chart with linear and log axes. 7 data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'linear',
+      yAxisId: 'linearAxis',
+      data: multipleYAxesData,
+      label: 'linear'
+    }, {
+      id: 'log',
+      yAxisId: 'logAxis',
+      data: multipleYAxesData,
+      label: 'log'
+    }],
+    xAxis: {
+      data: multipleYAxesData
+    },
+    yAxis: [{
+      id: 'linearAxis',
+      scaleType: 'linear'
+    }, {
+      id: 'logAxis',
+      scaleType: 'log'
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "logAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linearAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "linear"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "log"
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
 const AxesOnAllSides = () => {
   const theme = useTheme();
   const data = [30, 45, 60, 80, 55, 40, 65];
@@ -298,9 +312,12 @@ const DomainLimitType = _ref => {
   let {
     limit
   } = _ref;
-  const exponentialData = [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000];
+  const exponentialData = useMemo(() => [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + exponentialData[index], [exponentialData]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Exponential growth chart with " + exponentialData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'growthLinear',