@mui/x-charts 8.23.0 → 8.24.0

package/esm/PieChart/seriesConfig/legend.js

@@ -10,13 +10,16 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
+      const id = item.id ?? dataIndex;
       acc.push({
+        type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
-        id: item.id ?? dataIndex,
         seriesId,
+        id,
+        itemId: id,
+        dataIndex,
         color: item.color,
-        label: formattedLabel,
-        itemId: item.id ?? dataIndex
+        label: formattedLabel
       });
     });
     return acc;

package/esm/RadarChart/RadarChart.js

@@ -84,6 +84,31 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['radar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -140,6 +165,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/RadarChart/RadarChart.plugins.d.ts

@@ -2,5 +2,6 @@ import { type UseChartPolarAxisSignature } from "../internals/plugins/featurePlu
 import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>, import("../internals/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>];
+export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'radar'>];

package/esm/RadarChart/RadarChart.plugins.js

@@ -2,4 +2,5 @@ import { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartP
 import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const RADAR_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const RADAR_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight, useChartVisibilityManager];

package/esm/RadarChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ import legendGetter from "./legend.js";
 import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const radarSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -14,5 +15,6 @@ export const radarSeriesConfig = {
   axisTooltipGetter,
   getSeriesWithDefaultValues,
   radiusExtremumGetter,
-  rotationExtremumGetter
+  rotationExtremumGetter,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/RadarChart/seriesConfig/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'radar',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/esm/ScatterChart/BatchScatter.js

@@ -6,21 +6,12 @@ import { useUtilityClasses } from "./scatterClasses.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { appendAtKey } from "../internals/appendAtKey.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_POINTS_PER_PATH = 1000;
 /* In an SVG arc, if the arc starts and ends at the same point, it is not rendered, so we add a tiny
  * value to one of the coordinates to ensure that the arc is rendered. */
 const ALMOST_ZERO = 0.01;
-function appendAtKey(map, key, value) {
-  let bucket = map.get(key);
-  if (!bucket) {
-    bucket = [value];
-    map.set(key, bucket);
-  } else {
-    bucket.push(value);
-  }
-  return bucket;
-}
 function createPath(x, y, markerSize) {
   return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
 }
@@ -81,7 +72,10 @@ function BatchScatterPaths(props) {
 }
 const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
 if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
-const Group = styled('g')({
+const Group = styled('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   '&[data-faded="true"]': {
     opacity: 0.3
   },

package/esm/ScatterChart/ScatterChart.js

@@ -124,6 +124,31 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['scatter']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -169,6 +194,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/ScatterChart/ScatterChart.plugins.d.ts

@@ -7,5 +7,6 @@ import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/h
 import { type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/esm/ScatterChart/ScatterChart.plugins.js

@@ -6,4 +6,5 @@ import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartH
 import { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/ScatterChart/seriesConfig/index.js

@@ -6,6 +6,7 @@ import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -15,5 +16,6 @@ export const scatterSeriesConfig = {
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
-  keyboardFocusHandler
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/ScatterChart/seriesConfig/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'scatter',
       markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,

package/esm/SparkLineChart/SparkLineChart.js

@@ -241,6 +241,47 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['bar']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['line']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['scatter']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['pie']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['radar']).isRequired
+  })]).isRequired),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -286,6 +327,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.23.0
+ * @mui/x-charts v8.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/appendAtKey.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Given a map of arrays, appends a value to the array at the given key.
+ * If no array exists at that key, one is created and the value appended.
+ * @param map Map of arrays
+ * @param key Key to append the value at
+ * @param value Value to append
+ */
+export declare function appendAtKey<K, V>(map: Map<K, V[]>, key: K, value: V): V[];

package/esm/internals/appendAtKey.js

@@ -0,0 +1,17 @@
+/**
+ * Given a map of arrays, appends a value to the array at the given key.
+ * If no array exists at that key, one is created and the value appended.
+ * @param map Map of arrays
+ * @param key Key to append the value at
+ * @param value Value to append
+ */
+export function appendAtKey(map, key, value) {
+  let bucket = map.get(key);
+  if (!bucket) {
+    bucket = [value];
+    map.set(key, bucket);
+  } else {
+    bucket.push(value);
+  }
+  return bucket;
+}

package/esm/internals/commonNextFocusItem.js

@@ -1,4 +1,5 @@
 import { getPreviousNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js";
+import { getMaxSeriesLength } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.js";
 import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/index.js";
 import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js";
 import { seriesHasData } from "./seriesHasData.js";
@@ -15,11 +16,12 @@ export function createGetNextIndexFocusedItem(compatibleSeriesTypes) {
       type = nextSeries.type;
       seriesId = nextSeries.seriesId;
     }
-    const dataLength = processedSeries[type].series[seriesId].data.length;
+    const maxLength = getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const dataIndex = Math.min(maxLength - 1, currentItem?.dataIndex == null ? 0 : currentItem.dataIndex + 1);
     return {
       type,
       seriesId,
-      dataIndex: ((currentItem?.dataIndex ?? -1) + 1) % dataLength
+      dataIndex
     };
   };
 }
@@ -36,11 +38,12 @@ export function createGetPreviousIndexFocusedItem(compatibleSeriesTypes) {
       type = previousSeries.type;
       seriesId = previousSeries.seriesId;
     }
-    const dataLength = processedSeries[type].series[seriesId].data.length;
+    const maxLength = getMaxSeriesLength(processedSeries, compatibleSeriesTypes);
+    const dataIndex = Math.max(0, currentItem?.dataIndex == null ? maxLength - 1 : currentItem.dataIndex - 1);
     return {
       type,
       seriesId,
-      dataIndex: (dataLength + (currentItem?.dataIndex ?? 1) - 1) % dataLength
+      dataIndex
     };
   };
 }
@@ -55,11 +58,11 @@ export function createGetNextSeriesFocusedItem(compatibleSeriesTypes) {
     }
     type = nextSeries.type;
     seriesId = nextSeries.seriesId;
-    const dataLength = processedSeries[type].series[seriesId].data.length;
+    const dataIndex = currentItem?.dataIndex == null ? 0 : currentItem.dataIndex;
     return {
       type,
       seriesId,
-      dataIndex: Math.min(dataLength - 1, currentItem?.dataIndex ?? 0)
+      dataIndex
     };
   };
 }
@@ -74,11 +77,12 @@ export function createGetPreviousSeriesFocusedItem(compatibleSeriesTypes) {
     }
     type = previousSeries.type;
     seriesId = previousSeries.seriesId;
-    const dataLength = processedSeries[type].series[seriesId].data.length;
+    const data = processedSeries[type].series[seriesId].data;
+    const dataIndex = currentItem?.dataIndex == null ? data.length - 1 : currentItem.dataIndex;
     return {
       type,
       seriesId,
-      dataIndex: Math.min(dataLength - 1, currentItem?.dataIndex ?? 0)
+      dataIndex
     };
   };
 }

package/esm/internals/getBarDimensions.d.ts

@@ -1,5 +1,4 @@
-import type { ScaleName, ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import type { ComputedAxis } from "../models/axis.js";
+import type { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
 import type { ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export declare function getBarDimensions(params: {
   verticalLayout: boolean;

package/esm/internals/identifierSerializer.d.ts

@@ -0,0 +1,9 @@
+import type { SeriesId } from "../models/index.js";
+export declare const typeSerializer: (type: string) => string;
+export declare const seriesIdSerializer: (id: SeriesId) => string;
+export declare const dataIndexSerializer: (dataIndex?: number) => string;
+export declare const identifierSerializerSeriesIdDataIndex: (identifier: {
+  type: string;
+  seriesId: SeriesId;
+  dataIndex?: number;
+}) => string;

package/esm/internals/identifierSerializer.js

@@ -0,0 +1,6 @@
+export const typeSerializer = type => `Type(${type})`;
+export const seriesIdSerializer = id => `Series(${id})`;
+export const dataIndexSerializer = dataIndex => dataIndex === undefined ? '' : `Index(${dataIndex})`;
+export const identifierSerializerSeriesIdDataIndex = identifier => {
+  return `${typeSerializer(identifier.type)}${seriesIdSerializer(identifier.seriesId)}${dataIndexSerializer(identifier.dataIndex)}`;
+};

package/esm/internals/index.d.ts

@@ -12,13 +12,14 @@ export { scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";
-export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export * from "../BarChart/useBarChartProps.js";
 export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
 export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
+export { useRegisterPointerInteractions } from "./plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
@@ -29,6 +30,7 @@ export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartTooltip/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
+export * from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/featurePlugins/useChartBrush/index.js";
@@ -58,6 +60,7 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
 export { getBandSize } from "./getBandSize.js";
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
@@ -71,4 +74,5 @@ export * from "./plugins/models/index.js";
 export * from "./material/index.js";
 export * from "./createSvgIcon.js";
 export * from "./constants.js";
-export * from "./scales/index.js";
+export * from "./scales/index.js";
+export * from "./identifierSerializer.js";

package/esm/internals/index.js

@@ -15,13 +15,14 @@ export { scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";
-export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export * from "../BarChart/useBarChartProps.js";
 export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
 export { useSkipAnimation } from "../hooks/useSkipAnimation.js";
+export { useRegisterPointerInteractions } from "./plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
 
 // plugins
 export * from "./plugins/corePlugins/useChartId/index.js";
@@ -34,6 +35,7 @@ export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartTooltip/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
+export * from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/featurePlugins/useChartBrush/index.js";
@@ -68,6 +70,7 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
+export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
 export { getBandSize } from "./getBandSize.js";
 
@@ -85,4 +88,5 @@ export * from "./plugins/models/index.js";
 export * from "./material/index.js";
 export * from "./createSvgIcon.js";
 export * from "./constants.js";
-export * from "./scales/index.js";
+export * from "./scales/index.js";
+export * from "./identifierSerializer.js";

package/esm/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/esm/internals/invertScale.js

@@ -1,8 +1,16 @@
 import { isOrdinalScale } from "./scaleGuards.js";
 export function invertScale(scale, data, value) {
   if (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.
+ */
+export 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/esm/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/esm/internals/plugins/allPlugins.js

@@ -7,5 +7,6 @@ import { useChartKeyboardNavigation } from "./featurePlugins/useChartKeyboardNav
 import { useChartClosestPoint } from "./featurePlugins/useChartClosestPoint/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
 import { useChartBrush } from "./featurePlugins/useChartBrush/index.js";
+import { useChartVisibilityManager } from "./featurePlugins/useChartVisibilityManager/index.js";
 import { useChartTooltip } from "./featurePlugins/useChartTooltip/index.js";
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/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/esm/internals/plugins/corePlugins/useChartSeries/serializeIdentifier.js

@@ -0,0 +1,18 @@
+/**
+ * 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 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);
+};

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

@@ -2,8 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
 import { defaultizeSeries } from "./processSeries.js";
+import { serializeIdentifier as serializeIdentifierFn } from "./serializeIdentifier.js";
 export const useChartSeries = ({
   params,
   store,
@@ -28,7 +30,12 @@ export const useChartSeries = ({
       dataset
     }));
   }, [colors, dataset, series, theme, seriesConfig, store]);
-  return {};
+  const serializeIdentifier = useEventCallback(identifier => serializeIdentifierFn(seriesConfig, identifier));
+  return {
+    instance: {
+      serializeIdentifier
+    }
+  };
 };
 useChartSeries.params = {
   dataset: true,