@mui/x-charts 7.16.0 → 7.18.0

package/context/PolarProvider/PolarProvider.js

@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+import { computeAxisValue } from "../../internals/computeAxisValue.js";
+import { useDrawingArea } from "../../hooks/useDrawingArea.js";
+import { useSeries } from "../../hooks/useSeries.js";
+import { PolarContext } from "./PolarContext.js";
+import { useRadiusExtremumGetter } from "../PluginProvider/useRadiusExtremumGetter.js";
+import { useRotationExtremumGetter } from "../PluginProvider/useRotationExtremumGetter.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function PolarProvider(props) {
+  const {
+    rotationAxis,
+    radiusAxis,
+    children
+  } = props;
+  const formattedSeries = useSeries();
+  const drawingArea = useDrawingArea();
+  const rotationExtremumGetters = useRotationExtremumGetter();
+  const radiusExtremumGetters = useRadiusExtremumGetter();
+  const rotationValues = React.useMemo(() => computeAxisValue({
+    drawingArea,
+    formattedSeries,
+    axis: rotationAxis,
+    extremumGetters: rotationExtremumGetters,
+    axisDirection: 'rotation'
+  }), [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters]);
+  const radiusValues = React.useMemo(() => computeAxisValue({
+    drawingArea,
+    formattedSeries,
+    axis: radiusAxis,
+    extremumGetters: radiusExtremumGetters,
+    axisDirection: 'radius'
+  }), [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters]);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      rotationAxis: rotationValues.axis,
+      radiusAxis: radiusValues.axis,
+      rotationAxisIds: rotationValues.axisIds,
+      radiusAxisIds: radiusValues.axisIds
+    }
+  }), [rotationValues, radiusValues]);
+  return /*#__PURE__*/_jsx(PolarContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export { PolarProvider };

package/context/PolarProvider/getAxisExtremum.d.ts

@@ -0,0 +1,4 @@
+import { AxisConfig } from '../../models';
+import { FormattedSeries } from '../SeriesProvider';
+import { ExtremumGettersConfig } from '../PluginProvider';
+export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, axisIndex: number, formattedSeries: FormattedSeries) => number[];

package/context/PolarProvider/getAxisExtremum.js

@@ -0,0 +1,20 @@
+const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
+  const getter = getters[chartType];
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0
+  }) ?? [Infinity, -Infinity];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+export const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
+  const charTypes = Object.keys(getters);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};

package/context/PolarProvider/usePolarContext.d.ts

@@ -0,0 +1,2 @@
+import { PolarContextState } from './Polar.types';
+export declare const usePolarContext: () => PolarContextState;

package/context/PolarProvider/usePolarContext.js

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+import { PolarContext } from "./PolarContext.js";
+export const usePolarContext = () => {
+  const {
+    data
+  } = React.useContext(PolarContext);
+  return data;
+};

package/context/SeriesProvider/SeriesProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { blueberryTwilightPalette } from "../../colorPalettes/index.js";

package/context/ZAxisContextProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/hooks/useAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 export function useXAxis(identifier) {
   const {

package/hooks/useAxisEvents.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";

package/hooks/useChartDimensions.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_MARGINS } from "../constants/index.js";

package/hooks/useChartId.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { DrawingContext } from "../context/DrawingProvider.js";
 export function useChartId() {

package/hooks/useColorScale.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";

package/hooks/useDrawingArea.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { DrawingContext } from "../context/DrawingProvider.js";
 export function useDrawingArea() {

package/hooks/useInteractionItemProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useHighlighted } from "../context/index.js";

package/hooks/useMounted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 export function useMounted(defer = false) {

package/hooks/useReducedMotion.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
 const handleMediaChange = e => {
   Globals.assign({

package/hooks/useScale.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { isBandScale } from "../internals/isBandScale.js";
 import { useXAxis, useYAxis } from "./useAxis.js";
 

package/hooks/useSeries.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { SeriesContext } from "../context/SeriesProvider/index.js";
 

package/hooks/useSvgRef.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { SvgContext } from "../context/DrawingProvider.js";
 export function useSvgRef() {

package/hooks/useTicks.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { isBandScale } from "../internals/isBandScale.js";
 import { isInfinity } from "../internals/isInfinity.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.16.0
+ * @mui/x-charts v7.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/computeAxisValue.d.ts

@@ -0,0 +1,38 @@
+import { AxisConfig, ScaleName } from '../models';
+import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, ChartsRadiusAxisProps, ChartsRotationAxisProps } from '../models/axis';
+import { CartesianChartSeriesType } from '../models/seriesType/config';
+import { DrawingArea } from '../context/DrawingProvider';
+import { FormattedSeries } from '../context/SeriesProvider';
+import { ExtremumGetter } from '../context/PluginProvider';
+import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters } from '../context/CartesianProvider/Cartesian.types';
+type ComputeResult<T extends ChartsAxisProps> = {
+    axis: DefaultizedAxisConfig<T>;
+    axisIds: string[];
+};
+type ComputeCommonParams = {
+    drawingArea: DrawingArea;
+    formattedSeries: FormattedSeries;
+    extremumGetters: {
+        [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
+    };
+    zoomData?: ZoomData[];
+    zoomOptions?: ZoomOptions;
+    getFilters?: GetZoomAxisFilters;
+};
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+    axisDirection: 'y';
+}): ComputeResult<ChartsYAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+    axisDirection: 'x';
+}): ComputeResult<ChartsAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsRadiusAxisProps>[];
+    axisDirection: 'radius';
+}): ComputeResult<ChartsRadiusAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams & {
+    axis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+    axisDirection: 'rotation';
+}): ComputeResult<ChartsRotationAxisProps>;
+export {};

package/{modern/context/CartesianProvider/computeValue.js → internals/computeAxisValue.js}

@@ -1,15 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from "../../models/axis.js";
-import { getColorScale, getOrdinalColorScale } from "../../internals/colorScale.js";
-import { getTickNumber } from "../../hooks/useTicks.js";
-import { getScale } from "../../internals/getScale.js";
-import { zoomScaleRange } from "./zoom.js";
-import { getAxisExtremum } from "./getAxisExtremum.js";
-const getRange = (drawingArea, axisDirection, isReverse) => {
+import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "./colorScale.js";
+import { getTickNumber } from "../hooks/useTicks.js";
+import { getScale } from "./getScale.js";
+import { zoomScaleRange } from "../context/CartesianProvider/zoom.js";
+import { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
+function getRange(drawingArea, axisDirection, axis) {
+  if (axisDirection === 'rotation') {
+    const {
+      startAngle = 0,
+      endAngle = startAngle + 360
+    } = axis;
+    return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
+  }
+  if (axisDirection === 'radius') {
+    const {
+      minRadius = 0,
+      maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
+    } = axis;
+    return [minRadius, maxRadius];
+  }
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
-  return isReverse ? range.reverse() : range;
-};
+  return axis.reverse ? [range[1], range[0]] : range;
+}
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
   const timeScale = scaleTime(axis.data, range);
@@ -19,7 +33,7 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue({
+export function computeAxisValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
@@ -32,21 +46,20 @@ export function computeValue({
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
-    const isDefaultAxis = axisIndex === 0;
     const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomData?.find(({
       axisId
     }) => axisId === axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
-    const range = getRange(drawingArea, axisDirection, axis.reverse);
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
-      const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
@@ -65,7 +78,7 @@ export function computeValue({
       }
     }
     if (isPointScaleConfig(axis)) {
-      const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
+      const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
         data,

package/internals/index.d.ts

@@ -17,6 +17,7 @@ export * from './getSVGPoint';
 export * from './isDefined';
 export { unstable_cleanupDOM } from './domUtils';
 export * from './getScale';
+export * from './computeAxisValue';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/InteractionProvider';

package/internals/index.js

@@ -22,6 +22,7 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./computeAxisValue.js";
 
 // contexts
 

package/models/axis.d.ts

@@ -127,6 +127,26 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
      */
     position?: 'top' | 'bottom';
 }
+export interface ChartsRotationAxisProps extends ChartsAxisProps {
+    /**
+     * The start angle (in deg).
+     */
+    startAngle?: number;
+    /**
+     * The end angle (in deg).
+     */
+    endAngle?: number;
+}
+export interface ChartsRadiusAxisProps extends ChartsAxisProps {
+    /**
+     * The minimal radius.
+     */
+    minRadius?: number;
+    /**
+     * The maximal radius.
+     */
+    maxRadius?: number;
+}
 export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 export interface AxisScaleConfig {

package/models/seriesType/config.d.ts

@@ -1,7 +1,7 @@
-import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier } from './scatter';
+import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from './scatter';
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
-import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType } from './pie';
+import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType } from './pie';
 import { DefaultizedProps, MakeOptional } from '../helpers';
 export interface ChartsSeriesConfig {
     bar: {
@@ -20,6 +20,7 @@ export interface ChartsSeriesConfig {
          */
         seriesProp: BarSeriesType;
         itemIdentifier: BarItemIdentifier;
+        valueType: number | null;
         canBeStacked: true;
         cartesian: true;
     };
@@ -30,6 +31,7 @@ export interface ChartsSeriesConfig {
         series: DefaultizedLineSeriesType;
         seriesProp: LineSeriesType;
         itemIdentifier: LineItemIdentifier;
+        valueType: number | null;
         canBeStacked: true;
         cartesian: true;
     };
@@ -39,6 +41,7 @@ export interface ChartsSeriesConfig {
         };
         series: DefaultizedScatterSeriesType;
         seriesProp: ScatterSeriesType;
+        valueType: ScatterValueType;
         itemIdentifier: ScatterItemIdentifier;
         cartesian: true;
     };
@@ -51,6 +54,7 @@ export interface ChartsSeriesConfig {
         series: DefaultizedPieSeriesType;
         seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
         itemIdentifier: PieItemIdentifier;
+        valueType: DefaultizedPieValueType;
     };
 }
 export type ChartSeriesType = keyof ChartsSeriesConfig;

package/modern/BarChart/BarChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -144,6 +146,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,
@@ -193,6 +196,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/BarChart/BarElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];

package/modern/BarChart/BarLabel/BarLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];

package/modern/BarChart/BarPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];

package/modern/BarChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/modern/BarChart/useBarChartProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 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", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];

package/modern/ChartContainer/ChartContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartContainer/useChartContainerProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsGrid/ChartsGrid.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["vertical", "horizontal"];

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps"];
@@ -21,7 +23,8 @@ const useUtilityClasses = ownerState => {
     root: ['root', direction],
     mark: ['mark'],
     label: ['label'],
-    series: ['series']
+    series: ['series'],
+    itemBackground: ['itemBackground']
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
@@ -108,6 +111,13 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {SeriesLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.

package/modern/ChartsLegend/ChartsLegendItem.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
+import { ChartsText } from "../ChartsText/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+function ChartsLegendItem(props) {
+  const isRTL = useRtl();
+  const {
+    id,
+    positionY,
+    label,
+    positionX,
+    innerHeight,
+    innerWidth,
+    legendWidth,
+    color,
+    gapX,
+    gapY,
+    itemMarkHeight,
+    itemMarkWidth,
+    markGap,
+    labelStyle,
+    classes,
+    onClick
+  } = props;
+  return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes?.series, `${classes?.series}-${id}`),
+    transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: isRTL ? -(innerWidth + 2) : -2,
+      y: -itemMarkHeight / 2 - 2,
+      width: innerWidth + 4,
+      height: innerHeight + 4,
+      fill: "transparent",
+      className: classes?.itemBackground,
+      onClick: onClick,
+      style: {
+        pointerEvents: onClick ? 'all' : 'none',
+        cursor: onClick ? 'pointer' : 'unset'
+      }
+    }), /*#__PURE__*/_jsx("rect", {
+      className: classes?.mark,
+      x: isRTL ? -itemMarkWidth : 0,
+      y: -itemMarkHeight / 2,
+      width: itemMarkWidth,
+      height: itemMarkHeight,
+      fill: color,
+      style: {
+        pointerEvents: 'none'
+      }
+    }), /*#__PURE__*/_jsx(ChartsText, {
+      style: _extends({
+        pointerEvents: 'none'
+      }, labelStyle),
+      text: label,
+      x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+      y: 0
+    })]
+  });
+}
+export { ChartsLegendItem };