@mui/x-charts 8.22.1 → 8.24.0

package/internals/index.js

@@ -13,12 +13,13 @@ var _exportNames = {
   useLineChartProps: true,
   useAreaPlotData: true,
   useLinePlotData: true,
-  useBarChartProps: true,
   useBarPlotData: true,
   useRadarChartProps: true,
   useSkipAnimation: true,
+  useRegisterPointerInteractions: true,
   getCartesianAxisTriggerTooltip: true,
   getCartesianAxisIndex: true,
+  getSeriesColorFn: true,
   checkBarChartScaleErrors: true,
   getBandSize: true,
   getAxisExtrema: true
@@ -53,22 +54,22 @@ Object.defineProperty(exports, "getCartesianAxisTriggerTooltip", {
     return _getAxisTriggerTooltip.getAxisTriggerTooltip;
   }
 });
-Object.defineProperty(exports, "scatterSeriesConfig", {
+Object.defineProperty(exports, "getSeriesColorFn", {
   enumerable: true,
   get: function () {
-    return _seriesConfig.scatterSeriesConfig;
+    return _getSeriesColorFn.getSeriesColorFn;
   }
 });
-Object.defineProperty(exports, "useAreaPlotData", {
+Object.defineProperty(exports, "scatterSeriesConfig", {
   enumerable: true,
   get: function () {
-    return _useAreaPlotData.useAreaPlotData;
+    return _seriesConfig.scatterSeriesConfig;
   }
 });
-Object.defineProperty(exports, "useBarChartProps", {
+Object.defineProperty(exports, "useAreaPlotData", {
   enumerable: true,
   get: function () {
-    return _useBarChartProps.useBarChartProps;
+    return _useAreaPlotData.useAreaPlotData;
   }
 });
 Object.defineProperty(exports, "useBarPlotData", {
@@ -107,6 +108,12 @@ Object.defineProperty(exports, "useRadarChartProps", {
     return _useRadarChartProps.useRadarChartProps;
   }
 });
+Object.defineProperty(exports, "useRegisterPointerInteractions", {
+  enumerable: true,
+  get: function () {
+    return _useRegisterPointerInteractions.useRegisterPointerInteractions;
+  }
+});
 Object.defineProperty(exports, "useScatterChartProps", {
   enumerable: true,
   get: function () {
@@ -201,6 +208,17 @@ var _useLineChartProps = require("../LineChart/useLineChartProps");
 var _useAreaPlotData = require("../LineChart/useAreaPlotData");
 var _useLinePlotData = require("../LineChart/useLinePlotData");
 var _useBarChartProps = require("../BarChart/useBarChartProps");
+Object.keys(_useBarChartProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useBarChartProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useBarChartProps[key];
+    }
+  });
+});
 var _useBarPlotData = require("../BarChart/useBarPlotData");
 var _useRadarChartProps = require("../RadarChart/useRadarChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
@@ -240,6 +258,7 @@ Object.keys(_seriesSelectorOfType).forEach(function (key) {
   });
 });
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
+var _useRegisterPointerInteractions = require("./plugins/featurePlugins/shared/useRegisterPointerInteractions");
 var _useChartId = require("./plugins/corePlugins/useChartId");
 Object.keys(_useChartId).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -360,6 +379,18 @@ Object.keys(_useChartHighlight).forEach(function (key) {
     }
   });
 });
+var _useChartVisibilityManager = require("./plugins/featurePlugins/useChartVisibilityManager");
+Object.keys(_useChartVisibilityManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartVisibilityManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartVisibilityManager[key];
+    }
+  });
+});
 var _useChartKeyboardNavigation = require("./plugins/featurePlugins/useChartKeyboardNavigation");
 Object.keys(_useChartKeyboardNavigation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -554,15 +585,15 @@ Object.keys(_getScale).forEach(function (key) {
     }
   });
 });
-var _stackSeries = require("./stackSeries");
-Object.keys(_stackSeries).forEach(function (key) {
+var _stacking = require("./stacking");
+Object.keys(_stacking).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _stackSeries[key]) return;
+  if (key in exports && exports[key] === _stacking[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _stackSeries[key];
+      return _stacking[key];
     }
   });
 });
@@ -686,6 +717,7 @@ Object.keys(_findMinMax).forEach(function (key) {
     }
   });
 });
+var _getSeriesColorFn = require("./getSeriesColorFn");
 var _checkBarChartScaleErrors = require("../BarChart/checkBarChartScaleErrors");
 var _getBandSize = require("./getBandSize");
 var _getAxisExtrema = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema");
@@ -820,4 +852,16 @@ Object.keys(_scales).forEach(function (key) {
       return _scales[key];
     }
   });
+});
+var _identifierSerializer = require("./identifierSerializer");
+Object.keys(_identifierSerializer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _identifierSerializer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _identifierSerializer[key];
+    }
+  });
 });

package/internals/invertScale.d.ts

@@ -1,2 +1,6 @@
-import { type D3Scale } from "../models/axis.js";
-export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;
+import { type D3OrdinalScale, type D3Scale } from "../models/axis.js";
+export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;
+/**
+ * Get the data index for a given value on an ordinal scale.
+ */
+export declare function getDataIndexForOrdinalScaleValue(scale: D3OrdinalScale, value: number): number;

package/internals/invertScale.js

@@ -3,12 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getDataIndexForOrdinalScaleValue = getDataIndexForOrdinalScaleValue;
 exports.invertScale = invertScale;
 var _scaleGuards = require("./scaleGuards");
 function invertScale(scale, data, value) {
   if ((0, _scaleGuards.isOrdinalScale)(scale)) {
-    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    const dataIndex = getDataIndexForOrdinalScaleValue(scale, value);
     return data[dataIndex];
   }
   return scale.invert(value);
+}
+
+/**
+ * Get the data index for a given value on an ordinal scale.
+ */
+function getDataIndexForOrdinalScaleValue(scale, value) {
+  const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+  return dataIndex;
 }

package/internals/plugins/allPlugins.d.ts

@@ -7,7 +7,8 @@ import { type UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarA
 import { type UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
 import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
 import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
+import { type UseChartVisibilityManagerSignature } from "./featurePlugins/useChartVisibilityManager/index.js";
 import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];

package/internals/plugins/allPlugins.js

@@ -11,7 +11,8 @@ var _useChartKeyboardNavigation = require("./featurePlugins/useChartKeyboardNavi
 var _useChartClosestPoint = require("./featurePlugins/useChartClosestPoint");
 var _useChartZAxis = require("./featurePlugins/useChartZAxis");
 var _useChartBrush = require("./featurePlugins/useChartBrush");
+var _useChartVisibilityManager = require("./featurePlugins/useChartVisibilityManager");
 var _useChartTooltip = require("./featurePlugins/useChartTooltip");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/internals/plugins/corePlugins/useChartSeries/serializeIdentifier.d.ts

@@ -0,0 +1,14 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+/**
+ * Serializes a series item identifier into a unique string using the appropriate serializer
+ * from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {SeriesItemIdentifier<ChartSeriesType>} identifier - The series item identifier to serialize.
+ * @returns {string} A unique string representation of the identifier.
+ * @throws Will throw an error if no serializer is found for the given series type.
+ */
+export declare const serializeIdentifier: <T extends ChartSeriesType, U extends {
+  type: T;
+}>(seriesConfig: ChartSeriesConfig<T>, identifier: U) => string;

package/internals/plugins/corePlugins/useChartSeries/serializeIdentifier.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializeIdentifier = void 0;
+/**
+ * Serializes a series item identifier into a unique string using the appropriate serializer
+ * from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {SeriesItemIdentifier<ChartSeriesType>} identifier - The series item identifier to serialize.
+ * @returns {string} A unique string representation of the identifier.
+ * @throws Will throw an error if no serializer is found for the given series type.
+ */
+const serializeIdentifier = (seriesConfig, identifier) => {
+  const serializer = seriesConfig[identifier.type]?.identifierSerializer;
+  if (!serializer) {
+    throw new Error(`MUI X Charts: No identifier serializer found for series type "${identifier.type}".`);
+  }
+  // @ts-expect-error identifierSerializer expects the full object,
+  // but this function accepts a partial one in order be able to serialize all identifiers.
+  return serializer(identifier);
+};
+exports.serializeIdentifier = serializeIdentifier;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartSeries = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _colorPalettes = require("../../../../colorPalettes");
 var _processSeries = require("./processSeries");
+var _serializeIdentifier = require("./serializeIdentifier");
 const useChartSeries = ({
   params,
   store,
@@ -34,7 +36,12 @@ const useChartSeries = ({
       dataset
     }));
   }, [colors, dataset, series, theme, seriesConfig, store]);
-  return {};
+  const serializeIdentifier = (0, _useEventCallback.default)(identifier => (0, _serializeIdentifier.serializeIdentifier)(seriesConfig, identifier));
+  return {
+    instance: {
+      serializeIdentifier
+    }
+  };
 };
 exports.useChartSeries = useChartSeries;
 useChartSeries.params = {

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -45,7 +45,18 @@ export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType
     dataset?: Readonly<DatasetType>;
   };
 }
-export interface UseChartSeriesInstance {}
+export type SerializeIdentifierFunction = <T extends {
+  type: ChartSeriesType;
+}>(identifier: T) => string;
+export interface UseChartSeriesInstance {
+  /**
+   * Function to serialize a series item identifier into a unique string.
+   *
+   * @param identifier The identifier to serialize.
+   * @returns A unique string representing the identifier.
+   */
+  serializeIdentifier: SerializeIdentifierFunction;
+}
 export type UseChartSeriesSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
   params: UseChartSeriesParameters;
   defaultizedParams: UseChartSeriesDefaultizedParameters<SeriesType>;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.d.ts

@@ -0,0 +1,11 @@
+import { type SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
+import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
+import { type ChartState } from "../../models/index.js";
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+export declare function useRegisterPointerInteractions(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>, point: {
+  x: number;
+  y: number;
+}) => SeriesItemIdentifier | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisterPointerInteractions = useRegisterPointerInteractions;
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _hooks = require("../../../../hooks");
+var _useStore = require("../../../store/useStore");
+var _ChartProvider = require("../../../../context/ChartProvider");
+var _getSVGPoint = require("../../../getSVGPoint");
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const svgRef = (0, _hooks.useSvgRef)();
+  const store = (0, _useStore.useStore)();
+  const interactionActive = React.useRef(false);
+  const lastItemRef = React.useRef(undefined);
+  const onItemEnterRef = (0, _useEventCallback.default)(() => onItemEnter?.());
+  const onItemLeaveRef = (0, _useEventCallback.default)(() => onItemLeave?.());
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return undefined;
+    }
+    function onPointerEnter() {
+      interactionActive.current = true;
+    }
+    function reset() {
+      const lastItem = lastItemRef.current;
+      if (lastItem) {
+        lastItemRef.current = undefined;
+        instance.removeTooltipItem(lastItem);
+        instance.clearHighlight();
+        onItemLeaveRef();
+      }
+    }
+    function onPointerLeave() {
+      interactionActive.current = false;
+      reset();
+    }
+    const onPointerMove = function onPointerMove(event) {
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svg, event);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        reset();
+        return;
+      }
+      const item = getItemAtPosition(store.state, svgPoint);
+      if (item) {
+        instance.setLastUpdateSource('pointer');
+        instance.setTooltipItem(item);
+        instance.setHighlight(item);
+        onItemEnterRef();
+        lastItemRef.current = item;
+      } else {
+        reset();
+      }
+    };
+    svg.addEventListener('pointerleave', onPointerLeave);
+    svg.addEventListener('pointermove', onPointerMove);
+    svg.addEventListener('pointerenter', onPointerEnter);
+    return () => {
+      svg.removeEventListener('pointerenter', onPointerEnter);
+      svg.removeEventListener('pointermove', onPointerMove);
+      svg.removeEventListener('pointerleave', onPointerLeave);
+
+      /* Clean up state if this item is unmounted while active. */
+      if (interactionActive.current) {
+        onPointerLeave();
+      }
+    };
+  }, [getItemAtPosition, instance, onItemEnterRef, onItemLeaveRef, store, svgRef]);
+}

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -20,6 +20,16 @@ reverse) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return reverse ? [range[1], range[0]] : range;
 }
+function shouldIgnoreGapRatios(scale, categoryGapRatio) {
+  const step = scale.step();
+  const paddingPx = step * categoryGapRatio;
+
+  /* If the padding is less than 0.1px, we consider it negligible and ignore it.
+   * This prevents issues where very small gaps cause rendering artifacts or unexpected layouts.
+   * A threshold of 0.1px is chosen as it's generally below the perceptible limit for most displays.
+   */
+  return paddingPx < 0.1;
+}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 function computeAxisValue({
@@ -54,8 +64,10 @@ function computeAxisValue({
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       if ((0, _scaleGuards.isBandScale)(scale) && (0, _axis.isBandScaleConfig)(axis)) {
-        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+        const desiredCategoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const ignoreGapRatios = shouldIgnoreGapRatios(scale, desiredCategoryGapRatio);
+        const categoryGapRatio = ignoreGapRatios ? 0 : desiredCategoryGapRatio;
+        const barGapRatio = ignoreGapRatios ? 0 : axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
         completeAxis[axis.id] = (0, _extends2.default)({
           offset: 0,
           height: 0,
@@ -64,7 +76,12 @@ function computeAxisValue({
           triggerTooltip
         }, axis, {
           data,
-          scale,
+          /* Doing this here is technically wrong, but acceptable in practice.
+           * In theory, this should be done in the normalized scale selector, but then we'd need that selector to depend
+           * on the zoom range, which would void its goal (which is to be independent of zoom).
+           * Since we only ignore gap ratios when they're practically invisible, the small errors caused by this
+           * discrepancy will hopefully not be noticeable. */
+          scale: ignoreGapRatios ? scale.copy().padding(0) : scale,
           tickNumber,
           colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
             values: axis.data

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -23,6 +23,7 @@ var _getSVGPoint = require("../../../getSVGPoint");
 var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
+const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 const useChartCartesianAxis = ({
   params,
   store,
@@ -172,13 +173,19 @@ const useChartCartesianAxis = ({
       // The .data exist because otherwise the dataIndex would be null or -1.
       const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
       const seriesValues = {};
-      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = processedSeries[seriesType].series[seriesId];
+      Object.keys(processedSeries).filter(seriesType => AXIS_CLICK_SERIES_TYPES.has(seriesType)).forEach(seriesType => {
+        // @ts-ignore
+        const seriesTypeConfig = processedSeries[seriesType];
+        seriesTypeConfig?.seriesOrder.forEach(seriesId => {
+          const seriesItem = seriesTypeConfig.series[seriesId];
           const providedXAxisId = seriesItem.xAxisId;
           const providedYAxisId = seriesItem.yAxisId;
           const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            // @ts-ignore This is safe because users need to opt in to use range bar series.
+            // In that case, they should import the module augmentation from `x-charts-pro/moduleAugmentation/rangeBarOnClick`
+            // Which adds the proper type to the series data.
+            // TODO(v9): Remove this ts-ignore when we can make the breaking change to ChartsAxisData.
             seriesValues[seriesId] = seriesItem.data[dataIndex];
           }
         });

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.d.ts

@@ -0,0 +1,4 @@
+import { type BarItemIdentifier } from "../../../../models/index.js";
+export declare const selectorBarItemAtPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, svgPoint: Pick<DOMPoint, "x" | "y">) => BarItemIdentifier | undefined;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorBarItemAtPosition = void 0;
+var _store = require("@mui/x-internals/store");
+var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _getBandSize = require("../../../../internals/getBandSize");
+var _scaleGuards = require("../../../../internals/scaleGuards");
+var _invertScale = require("../../../../internals/invertScale");
+const selectorBarItemAtPosition = exports.selectorBarItemAtPosition = (0, _store.createSelector)(_useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, function selectorBarItemAtPosition({
+  axis: xAxes,
+  axisIds: xAxisIds
+}, {
+  axis: yAxes,
+  axisIds: yAxisIds
+}, processedSeries, svgPoint) {
+  const {
+    series,
+    stackingGroups = []
+  } = processedSeries?.bar ?? {};
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  let item = undefined;
+  for (let stackIndex = 0; stackIndex < stackingGroups.length; stackIndex += 1) {
+    const group = stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+    for (const seriesId of seriesIds) {
+      const aSeries = (series ?? {})[seriesId];
+      const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+      const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+      const xAxis = xAxes[xAxisId];
+      const yAxis = yAxes[yAxisId];
+      const bandAxis = aSeries.layout === 'horizontal' ? yAxis : xAxis;
+      const continuousAxis = aSeries.layout === 'horizontal' ? xAxis : yAxis;
+      const bandScale = bandAxis.scale;
+      const svgPointBandCoordinate = aSeries.layout === 'horizontal' ? svgPoint.y : svgPoint.x;
+      if (!(0, _scaleGuards.isBandScale)(bandScale)) {
+        continue;
+      }
+      const dataIndex = (0, _invertScale.getDataIndexForOrdinalScaleValue)(bandScale, svgPointBandCoordinate);
+      const {
+        barWidth,
+        offset
+      } = (0, _getBandSize.getBandSize)(bandScale.bandwidth(), stackingGroups.length, bandAxis.barGapRatio);
+      const barOffset = stackIndex * (barWidth + offset);
+      const bandValue = bandAxis.data?.[dataIndex];
+      if (bandValue == null) {
+        continue;
+      }
+      const bandStart = bandScale(bandValue);
+      if (bandStart == null) {
+        continue;
+      }
+      const bandBarStart = bandStart + barOffset;
+      const bandBarEnd = bandBarStart + barWidth;
+      const bandBarMin = Math.min(bandBarStart, bandBarEnd);
+      const bandBarMax = Math.max(bandBarStart, bandBarEnd);
+      if (svgPointBandCoordinate >= bandBarMin && svgPointBandCoordinate <= bandBarMax) {
+        // The point is inside the band for this series
+        const svgPointContinuousCoordinate = aSeries.layout === 'horizontal' ? svgPoint.x : svgPoint.y;
+        const bar = aSeries.stackedData[dataIndex];
+        const start = continuousAxis.scale(bar[0]);
+        const end = continuousAxis.scale(bar[1]);
+        if (start == null || end == null) {
+          continue;
+        }
+        const continuousMin = Math.min(start, end);
+        const continuousMax = Math.max(start, end);
+        if (svgPointContinuousCoordinate >= continuousMin && svgPointContinuousCoordinate <= continuousMax) {
+          item = {
+            seriesId,
+            dataIndex
+          };
+        }
+      }
+    }
+  }
+  if (item) {
+    return {
+      type: 'bar',
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    };
+  }
+  return undefined;
+});

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.d.ts

@@ -0,0 +1,13 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+import type { ChartState } from "../../models/chart.js";
+export type FocusedItemUpdater<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (currentItem: (TSeriesType extends any ? FocusedItemIdentifier<TSeriesType> : never) | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => FocusedItemIdentifier<OutputSeriesType> | null;
+/**
+ * Get the next focusable item in the chart.
+ * @param {SeriesItemIdentifier<TSeriesType> | null} currentItem The current focused item.
+ * @param {KeyboardEvent} event The keyboard event that triggered the navigation.
+ * @param {ChartState<[UseChartKeyboardNavigationSignature], []>} state The current chart state.
+ * @returns {SeriesItemIdentifier<ChartSeriesType> | null} The next focusable item or null if none found.
+ */
+export type KeyboardFocusHandler<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (event: KeyboardEvent) => FocusedItemUpdater<TSeriesType, OutputSeriesType> | null;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.d.ts

@@ -1,3 +1,3 @@
-import { type ChartPlugin } from "../../models/index.js";
-import { type UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+import type { ChartPlugin } from "../../models/index.js";
+import type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
 export declare const useChartKeyboardNavigation: ChartPlugin<UseChartKeyboardNavigationSignature>;