@mui/x-charts 8.23.0 → 8.24.0

package/esm/BarChart/BatchBarPlot/index.d.ts

@@ -0,0 +1 @@
+export { BatchBarPlot } from "./BatchBarPlot.js";

package/esm/BarChart/BatchBarPlot/index.js

@@ -0,0 +1 @@
+export { BatchBarPlot } from "./BatchBarPlot.js";

package/esm/BarChart/BatchBarPlot/useCreateBarPaths.d.ts

@@ -0,0 +1,8 @@
+import type { ProcessedBarData, ProcessedBarSeriesData } from "../types.js";
+export declare function createPath(barData: ProcessedBarData, borderRadius: number): string;
+/**
+ * Hook that creates bar paths for a given series data. Used by the batch bar renderer.
+ * @param seriesData
+ * @param borderRadius
+ */
+export declare function useCreateBarPaths(seriesData: ProcessedBarSeriesData, borderRadius: number): Map<string, string[]>;

package/esm/BarChart/BatchBarPlot/useCreateBarPaths.js

@@ -0,0 +1,46 @@
+import { appendAtKey } from "../../internals/appendAtKey.js";
+const MAX_POINTS_PER_PATH = 1000;
+function generateBarPath(x, y, width, height, topLeftBorderRadius, topRightBorderRadius, bottomRightBorderRadius, bottomLeftBorderRadius) {
+  const tLBR = Math.min(topLeftBorderRadius, width / 2, height / 2);
+  const tRBR = Math.min(topRightBorderRadius, width / 2, height / 2);
+  const bRBR = Math.min(bottomRightBorderRadius, width / 2, height / 2);
+  const bLBR = Math.min(bottomLeftBorderRadius, width / 2, height / 2);
+  return `M${x + tLBR},${y}
+   h${width - tLBR - tRBR}
+   a${tRBR},${tRBR} 0 0 1 ${tRBR},${tRBR}
+   v${height - tRBR - bRBR}
+   a${bRBR},${bRBR} 0 0 1 -${bRBR},${bRBR}
+   h-${width - bRBR - bLBR}
+   a${bLBR},${bLBR} 0 0 1 -${bLBR},-${bLBR}
+   v-${height - bLBR - tLBR}
+   a${tLBR},${tLBR} 0 0 1 ${tLBR},-${tLBR}
+   Z`;
+}
+export function createPath(barData, borderRadius) {
+  return generateBarPath(barData.x, barData.y, barData.width, barData.height, barData.borderRadiusSide === 'left' || barData.borderRadiusSide === 'top' ? borderRadius : 0, barData.borderRadiusSide === 'right' || barData.borderRadiusSide === 'top' ? borderRadius : 0, barData.borderRadiusSide === 'right' || barData.borderRadiusSide === 'bottom' ? borderRadius : 0, barData.borderRadiusSide === 'left' || barData.borderRadiusSide === 'bottom' ? borderRadius : 0);
+}
+
+/**
+ * Hook that creates bar paths for a given series data. Used by the batch bar renderer.
+ * @param seriesData
+ * @param borderRadius
+ */
+export function useCreateBarPaths(seriesData, borderRadius) {
+  const paths = new Map();
+  const temporaryPaths = new Map();
+  for (let j = 0; j < seriesData.data.length; j += 1) {
+    const barData = seriesData.data[j];
+    const pathString = createPath(barData, borderRadius);
+    const tempPath = appendAtKey(temporaryPaths, barData.color, pathString);
+    if (tempPath.length >= MAX_POINTS_PER_PATH) {
+      appendAtKey(paths, barData.color, tempPath.join(''));
+      temporaryPaths.delete(barData.color);
+    }
+  }
+  for (const [fill, tempPath] of temporaryPaths.entries()) {
+    if (tempPath.length > 0) {
+      appendAtKey(paths, fill, tempPath.join(''));
+    }
+  }
+  return paths;
+}

package/esm/BarChart/FocusedBar.js

@@ -22,7 +22,11 @@ export function FocusedBar(props) {
   if (focusedItem === null || focusedItem.type !== 'bar' || !barSeries) {
     return null;
   }
-  const series = barSeries?.series[focusedItem.seriesId];
+  const series = barSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
+    return null;
+  }
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const xAxisConfig = xAxis[xAxisId];

package/esm/BarChart/IndividualBarPlot.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
+import { type BarItemIdentifier } from "../models/index.js";
+import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
+export interface IndividualBarPlotProps {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+  borderRadius?: number;
+  skipAnimation?: boolean;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  slotProps?: BarPlotSlotProps;
+  slots?: BarPlotSlots;
+}
+export declare function IndividualBarPlot({
+  completedData,
+  masksData,
+  borderRadius,
+  onItemClick,
+  skipAnimation,
+  ...other
+}: IndividualBarPlotProps): import("react/jsx-runtime").JSX.Element;

package/esm/BarChart/IndividualBarPlot.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["completedData", "masksData", "borderRadius", "onItemClick", "skipAnimation"];
+import * as React from 'react';
+import { BarElement } from "./BarElement.js";
+import { useUtilityClasses } from "./barClasses.js";
+import { BarClipPath } from "./BarClipPath.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function IndividualBarPlot(_ref) {
+  let {
+      completedData,
+      masksData,
+      borderRadius,
+      onItemClick,
+      skipAnimation
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const classes = useUtilityClasses();
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!withoutBorderRadius && masksData.map(({
+      id,
+      x,
+      y,
+      xOrigin,
+      yOrigin,
+      width,
+      height,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        x: x,
+        y: y,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false
+      }, id);
+    }), completedData.map(({
+      seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
+      data
+    }) => {
+      return /*#__PURE__*/_jsx("g", {
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          x,
+          y,
+          width,
+          height
+        }) => {
+          const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height
+          }, other, {
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'bar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+          if (withoutBorderRadius) {
+            return barElement;
+          }
+          return /*#__PURE__*/_jsx("g", {
+            clipPath: `url(#${maskId})`,
+            children: barElement
+          }, dataIndex);
+        })
+      }, seriesId);
+    })]
+  });
+}

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -9,7 +9,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   layout?: "horizontal" | "vertical";
   stackOffset?: import("../../../index.js").StackOffsetType;
   minBarSize?: number;
-  barLabel?: "value" | ((item: import("../../index.js").BarItem, context: import("../../index.js").BarLabelContext) => string | null | undefined);
+  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
   highlightScope?: import("../../../index.js").HighlightScope;

package/esm/BarChart/seriesConfig/bar/legend.js

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

package/esm/BarChart/seriesConfig/index.js

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

package/esm/BarChart/types.d.ts

@@ -15,12 +15,14 @@ export interface ProcessedBarSeriesData {
   xOrigin: number;
   yOrigin: number;
 }
+export type BorderRadiusSide = 'top' | 'bottom' | 'left' | 'right';
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
   value: number | null;
   maskId: string;
+  borderRadiusSide?: BorderRadiusSide;
 }
 export interface MaskData extends AnimationData {
   id: string;

package/esm/BarChart/useBarChartProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BarChartProps } from "./BarChart.js";
+import { type BarChartProps, type BarSeries } from "./BarChart.js";
 import { type ChartContainerProps } from "../ChartContainer/index.js";
 import { type BarPlotProps } from "./BarPlot.js";
 import { type ChartsGridProps } from "../ChartsGrid/index.js";
@@ -10,6 +10,10 @@ import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
+export interface UseBarChartPropsExtensions {}
+export type UseBarChartProps = Omit<BarChartProps, 'series'> & Omit<{
+  series: ReadonlyArray<BarSeries>;
+}, keyof UseBarChartPropsExtensions> & UseBarChartPropsExtensions;
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -17,7 +21,7 @@ import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
  * @param props The input props for BarChart
  * @returns An object with props for the children components of BarChart
  */
-export declare const useBarChartProps: (props: BarChartProps) => {
+export declare const useBarChartProps: (props: UseBarChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartContainerProps: ChartContainerProps<"bar", BarChartPluginSignatures>;
   barPlotProps: BarPlotProps;

package/esm/BarChart/useBarChartProps.js

@@ -2,12 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { BAR_CHART_PLUGINS } from "./BarChart.plugins.js";
-
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -40,7 +39,8 @@ export const useBarChartProps = props => {
       borderRadius,
       barLabel,
       className,
-      brushConfig
+      brushConfig,
+      renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -105,6 +105,7 @@ export const useBarChartProps = props => {
     slots,
     slotProps,
     borderRadius,
+    renderer,
     barLabel
   };
   const gridProps = {

package/esm/BarChart/useBarPlotData.d.ts

@@ -1,7 +1,7 @@
 import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
-import { type ChartDrawingArea } from "../hooks/index.js";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
 import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+import { type ChartDrawingArea } from "../hooks/useDrawingArea.js";
 export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
   completedData: ProcessedBarSeriesData[];
   masksData: MaskData[];

package/esm/BarChart/useBarPlotData.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import getColor from "./seriesConfig/bar/getColor.js";
-import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { checkBarChartScaleErrors } from "./checkBarChartScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
 import { getBarDimensions } from "../internals/getBarDimensions.js";
+import { useChartId } from "../hooks/useChartId.js";
 export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = useBarSeriesContext() ?? {
     series: {},
@@ -25,6 +26,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
     const xMax = drawingArea.left + drawingArea.width;
     const yMin = drawingArea.top;
     const yMax = drawingArea.top + drawingArea.height;
+    const lastNegativePerIndex = new Map();
+    const lastPositivePerIndex = new Map();
     return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
@@ -66,6 +69,22 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
           continue;
         }
+        const lastNegative = lastNegativePerIndex.get(dataIndex);
+        const lastPositive = lastPositivePerIndex.get(dataIndex);
+        const sign = (reverse ? -1 : 1) * Math.sign(result.value ?? 0);
+        if (sign > 0) {
+          if (lastPositive) {
+            delete lastPositive.borderRadiusSide;
+          }
+          result.borderRadiusSide = verticalLayout ? 'top' : 'right';
+          lastPositivePerIndex.set(dataIndex, result);
+        } else if (sign < 0) {
+          if (lastNegative) {
+            delete lastNegative.borderRadiusSide;
+          }
+          result.borderRadiusSide = verticalLayout ? 'bottom' : 'left';
+          lastNegativePerIndex.set(dataIndex, result);
+        }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
             id: result.maskId,

package/esm/BarChart/useRegisterItemClickHandlers.d.ts

@@ -0,0 +1,6 @@
+import { type BarItemIdentifier } from "../models/seriesType/index.js";
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+export declare function useRegisterItemClickHandlers(onItemClick: ((event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void) | undefined): void;

package/esm/BarChart/useRegisterItemClickHandlers.js

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorBarItemAtPosition } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js";
+
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+export function useRegisterItemClickHandlers(onItemClick) {
+  const {
+    instance
+  } = useChartContext();
+  const svgRef = useSvgRef();
+  const store = useStore();
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!element || !onItemClick) {
+      return undefined;
+    }
+    let lastPointerUp = null;
+    const onClick = function onClick(event) {
+      let point = event;
+
+      /* The click event doesn't contain decimal values in clientX/Y, but the pointermove does.
+       * This caused a problem when rendering many bars that were thinner than a pixel where the tooltip or the highlight
+       * would refer to a different bar than the click since those rely on the pointermove event.
+       * As a fix, we use the pointerup event to get the decimal values and check if the pointer up event was close enough
+       * to the click event (1px difference in each direction); if so, then we can use the pointerup's clientX/Y; if not,
+       * we default to the click event's clientX/Y. */
+      if (lastPointerUp) {
+        if (Math.abs(event.clientX - lastPointerUp.clientX) <= 1 && Math.abs(event.clientY - lastPointerUp.clientY) <= 1) {
+          point = {
+            clientX: lastPointerUp.clientX,
+            clientY: lastPointerUp.clientY
+          };
+        }
+      }
+      lastPointerUp = null;
+      const svgPoint = getSVGPoint(element, point);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        return;
+      }
+      const item = selectorBarItemAtPosition(store.state, svgPoint);
+      if (item) {
+        onItemClick(event, {
+          type: 'bar',
+          seriesId: item.seriesId,
+          dataIndex: item.dataIndex
+        });
+      }
+    };
+    const onPointerUp = function onPointerUp(event) {
+      lastPointerUp = event;
+    };
+    element.addEventListener('click', onClick);
+    element.addEventListener('pointerup', onPointerUp);
+    return () => {
+      element.removeEventListener('click', onClick);
+      element.removeEventListener('pointerup', onPointerUp);
+    };
+  }, [instance, onItemClick, store, svgRef]);
+}

package/esm/ChartContainer/ChartContainer.js

@@ -95,6 +95,35 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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.any,
+    seriesId: PropTypes.shape({
+      toLocaleString: PropTypes.func.isRequired,
+      toString: PropTypes.func.isRequired,
+      valueOf: PropTypes.func.isRequired
+    }),
+    type: PropTypes.object.isRequired
+  })),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -139,6 +168,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -39,7 +39,9 @@ export const useChartContainerProps = (props, ref) => {
       slotProps,
       experimentalFeatures,
       enableKeyboardNavigation,
-      brushConfig
+      brushConfig,
+      onHiddenItemsChange,
+      hiddenItems
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
@@ -75,6 +77,8 @@ export const useChartContainerProps = (props, ref) => {
     experimentalFeatures,
     enableKeyboardNavigation,
     brushConfig,
+    onHiddenItemsChange,
+    hiddenItems,
     plugins: plugins ?? DEFAULT_PLUGINS,
     slots,
     slotProps

package/esm/ChartsLegend/ChartsLegend.js

@@ -82,7 +82,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     children: data.items.map((item, i) => {
       return /*#__PURE__*/_jsx("li", {
         className: classes?.item,
-        "data-series": item.id,
+        "data-series": item.seriesId,
         children: /*#__PURE__*/_jsxs(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,
@@ -99,7 +99,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
             children: item.label
           })]
         })
-      }, item.id);
+      }, `${item.seriesId}-${item.dataIndex}`);
     })
   }));
 }));

package/esm/ChartsLegend/legendContext.types.d.ts

@@ -1,6 +1,7 @@
 import { type ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
 import { type PieItemId } from "../models/index.js";
 import { type SeriesId } from "../models/seriesType/common.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
 interface LegendItemContextBase {
   /**
    * The color used in the legend
@@ -15,8 +16,14 @@ export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext,
   /**
    * The identifier of the legend element.
    * Used for internal purpose such as `key` props
+   * @deprecated use `seriesId` and `dataIndex` instead
    */
   id: number | string;
+  /**
+   * The type of the series
+   * This property is always defined, but marked as optional to avoid breaking changes. It will become required in a future major version.
+   */
+  type?: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
 }
 export interface SeriesLegendItemContext extends LegendItemContextBase {
@@ -32,8 +39,13 @@ export interface SeriesLegendItemContext extends LegendItemContextBase {
   seriesId: SeriesId;
   /**
    * The identifier of the pie item
+   * @deprecated use `dataIndex` instead
    */
   itemId?: PieItemId;
+  /**
+   * The data index of the item in the series data array
+   */
+  dataIndex?: number;
 }
 export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
   /**

package/esm/ChartsLegend/onClickContextBuilder.js

@@ -3,5 +3,6 @@ export const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId
+  itemId: context.itemId,
+  dataIndex: context.dataIndex
 });

package/esm/ChartsOverlay/ChartsLoadingOverlay.js

@@ -7,7 +7,10 @@ import { styled } from '@mui/material/styles';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text')(({
+const StyledText = styled('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => _extends({}, theme.typography.body2, {
   stroke: 'none',

package/esm/ChartsOverlay/ChartsNoDataOverlay.js

@@ -7,7 +7,10 @@ import { styled } from '@mui/material/styles';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text')(({
+const StyledText = styled('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => _extends({}, theme.typography.body2, {
   stroke: 'none',

package/esm/ChartsReferenceLine/common.d.ts

@@ -40,4 +40,4 @@ export type CommonChartsReferenceLineProps = {
    */
   classes?: Partial<ChartsReferenceLineClasses>;
 };
-export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGGElement>, {}>;
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/esm/ChartsReferenceLine/common.js

@@ -3,7 +3,10 @@ import { styled } from '@mui/material/styles';
 import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
 export const DEFAULT_SPACING = 5;
 export const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
-export const ReferenceLineRoot = styled('g')(({
+export const ReferenceLineRoot = styled('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   [`& .${referenceLineClasses.line}`]: {