@mui/x-charts 7.5.1 → 7.6.1

package/hooks/useInteractionItemProps.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInteractionItemProps = exports.getIsHighlighted = exports.getIsFaded = void 0;
+exports.useInteractionItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
-var _HighlightProvider = require("../context/HighlightProvider");
+var _context = require("../context");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useInteractionItemProps = (scope, skip) => {
+const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
   const {
-    dispatch: dispatchHighlight
-  } = React.useContext(_HighlightProvider.HighlighContext);
+    setHighlighted,
+    clearHighlighted
+  } = React.useContext(_context.HighlightedContext);
   if (skip) {
     return () => ({});
   }
@@ -25,10 +26,9 @@ const useInteractionItemProps = (scope, skip) => {
         type: 'enterItem',
         data
       });
-      dispatchHighlight({
-        type: 'enterItem',
-        item: data,
-        scope
+      setHighlighted({
+        seriesId: data.seriesId,
+        dataIndex: data.dataIndex
       });
     };
     const onMouseLeave = () => {
@@ -36,10 +36,7 @@ const useInteractionItemProps = (scope, skip) => {
         type: 'leaveItem',
         data
       });
-      dispatchHighlight({
-        type: 'leaveItem',
-        item: data
-      });
+      clearHighlighted();
     };
     return {
       onMouseEnter,
@@ -48,35 +45,4 @@ const useInteractionItemProps = (scope, skip) => {
   };
   return getInteractionItemProps;
 };
-exports.useInteractionItemProps = useInteractionItemProps;
-const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.highlighted || highlightScope.highlighted === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (!isSeriesSelected) {
-    return false;
-  }
-  if (highlightScope.highlighted === 'series') {
-    return isSeriesSelected;
-  }
-  return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
-};
-exports.getIsHighlighted = getIsHighlighted;
-const getIsFaded = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.faded || highlightScope.faded === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (highlightScope.faded === 'series') {
-    return isSeriesSelected && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  if (highlightScope.faded === 'global') {
-    if (!isSeriesSelected) {
-      return true;
-    }
-    return selectedItem.dataIndex !== undefined && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  return false;
-};
-exports.getIsFaded = getIsFaded;
+exports.useInteractionItemProps = useInteractionItemProps;

package/index.js

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

package/internals/colorScale.d.ts

@@ -2,4 +2,4 @@ import { ScaleOrdinal } from 'd3-scale';
 import { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from '../models/colorMapping';
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("d3-scale").ScaleThreshold<Value, string, never> | import("d3-scale").ScaleSequential<string, never>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("d3-scale").ScaleSequential<string, never> | import("d3-scale").ScaleThreshold<number | Date, string, never>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("d3-scale").ScaleThreshold<number | Date, string, never>;

package/internals/defaultizeColor.d.ts

@@ -58,19 +58,6 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     yAxisKey?: string | undefined;
     stack?: string | undefined;
     stackOrder?: import("..").StackOrderType | undefined;
-} | {
-    type: "scatter";
-    data: import("../models/seriesType").ScatterValueType[];
-    markerSize?: number | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    disableHover?: boolean | undefined;
-    zAxisKey?: string | undefined;
-    id?: import("../models/seriesType/common").SeriesId | undefined;
-    color: string;
-    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
 } | {
     type: "line";
     data?: (number | null)[] | undefined;
@@ -90,4 +77,17 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
     stackOrder?: import("..").StackOrderType | undefined;
+} | {
+    type: "scatter";
+    data: import("../models/seriesType").ScatterValueType[];
+    markerSize?: number | undefined;
+    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
+    disableHover?: boolean | undefined;
+    zAxisKey?: string | undefined;
+    id?: import("../models/seriesType/common").SeriesId | undefined;
+    color: string;
+    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
+    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+    xAxisKey?: string | undefined;
+    yAxisKey?: string | undefined;
 };

package/models/seriesType/common.d.ts

@@ -1,4 +1,4 @@
-import type { HighlightScope } from '../../context/HighlightProvider';
+import type { HighlightScope } from '../../context';
 import type { StackOffsetType, StackOrderType } from '../stacking';
 export type SeriesId = number | string;
 export type SeriesValueFormatterContext = {
@@ -18,6 +18,9 @@ export type CommonSeriesType<TValue> = {
      * @returns {string} The string to display.
      */
     valueFormatter?: SeriesValueFormatter<TValue>;
+    /**
+     * The scope to apply when the series is highlighted.
+     */
     highlightScope?: Partial<HighlightScope>;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';

package/modern/BarChart/BarChart.js

@@ -53,7 +53,9 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     slots,
     slotProps,
     loading,
-    barLabel
+    barLabel,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -89,6 +91,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
@@ -188,6 +192,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -237,6 +248,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/modern/BarChart/BarElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -10,8 +10,8 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { animated } from '@react-spring/web';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
@@ -45,27 +45,20 @@ function BarElement(props) {
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
       slots,
       slotProps,
       style,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId: id,
     dataIndex
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     dataIndex,
@@ -101,10 +94,6 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The props used for each component slot.

package/modern/BarChart/BarLabel/BarLabelItem.js

@@ -5,12 +5,10 @@ const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLab
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import PropTypes from 'prop-types';
-import { InteractionContext } from '../../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted } from '../../hooks/useInteractionItemProps';
 import { useUtilityClasses } from './barLabelClasses';
-import { HighlighContext } from '../../context/HighlightProvider';
 import { getBarLabel } from './getBarLabel';
 import { BarLabel } from './BarLabel';
+import { useItemHighlighted } from '../../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -31,21 +29,12 @@ function BarLabelItem(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const {
-    scope
-  } = React.useContext(HighlighContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'bar',
-    seriesId,
-    dataIndex
-  }, scope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId,
     dataIndex
-  }, scope);
+  });
   const ownerState = {
     seriesId,
     classes: innerClasses,

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -83,10 +83,6 @@ process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
     color: PropTypes.string.isRequired,
     dataIndex: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
-    highlightScope: PropTypes.shape({
-      faded: PropTypes.oneOf(['global', 'none', 'series']),
-      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-    }),
     layout: PropTypes.oneOf(['horizontal', 'vertical']),
     maskId: PropTypes.string.isRequired,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

package/modern/BarChart/BarPlot.js

@@ -7,12 +7,11 @@ import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
-import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useChartId } from '../hooks';
 import { BarClipPath } from './BarClipPath';
 import { BarLabelPlot } from './BarLabel/BarLabelPlot';
+import { checkScaleErrors } from './checkScaleErrors';
 
 /**
  * Solution of the equations
@@ -72,30 +71,8 @@ const useAggregatedData = () => {
       const xAxisConfig = xAxis[xAxisKey];
       const yAxisConfig = yAxis[yAxisKey];
       const verticalLayout = series[seriesId].layout === 'vertical';
-      let baseScaleConfig;
-      if (verticalLayout) {
-        if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property.`);
-        }
-        baseScaleConfig = xAxisConfig;
-        if (isBandScaleConfig(yAxisConfig) || isPointScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
-        }
-      } else {
-        if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
-        }
-        if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should have data property.`);
-        }
-        baseScaleConfig = yAxisConfig;
-        if (isBandScaleConfig(xAxisConfig) || isPointScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
-        }
-      }
+      checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
       const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
@@ -128,7 +105,6 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope,
           value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
@@ -251,14 +227,12 @@ function BarPlot(props) {
       seriesId,
       dataIndex,
       color,
-      highlightScope,
       maskId
     }) => {
       const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
         id: seriesId,
         dataIndex: dataIndex,
-        color: color,
-        highlightScope: highlightScope
+        color: color
       }, other, {
         onClick: onItemClick && (event => {
           onItemClick(event, {

package/modern/BarChart/checkScaleErrors.js

@@ -0,0 +1,27 @@
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+const getAxisMessage = (axisDirection, axisKey) => {
+  const axisName = `${axisDirection}-axis`;
+  const axisKeyName = `${axisDirection}Axis`;
+  const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return axisKey === axisDefaultKey ? `The first \`${axisKeyName}\`` : `The ${axisName} with id "${axisKey}"`;
+};
+export function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
+  const xAxisConfig = xAxis[xAxisKey];
+  const yAxisConfig = yAxis[yAxisKey];
+  const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
+  const discreteAxisKey = verticalLayout ? xAxisKey : yAxisKey;
+  const continuousAxisKey = verticalLayout ? yAxisKey : xAxisKey;
+  const discreteAxisDirection = verticalLayout ? 'x' : 'y';
+  const continuousAxisDirection = verticalLayout ? 'y' : 'x';
+  if (!isBandScaleConfig(discreteAxisConfig)) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should be of type "band" to display the bar series of id "${seriesId}".`);
+  }
+  if (discreteAxisConfig.data === undefined) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should have data property.`);
+  }
+  if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisKey)} should be a continuous type to display the bar series of id "${seriesId}".`);
+  }
+}

package/modern/ChartContainer/ChartContainer.js

@@ -7,8 +7,8 @@ import { InteractionProvider } from '../context/InteractionProvider';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
-import { HighlightProvider } from '../context/HighlightProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
+import { HighlightedProvider } from '../context';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
@@ -24,6 +24,8 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     title,
     desc,
     disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
     children
   } = props;
   const svgRef = React.useRef(null);
@@ -44,7 +46,9 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
         yAxis: yAxis,
         dataset: dataset,
         children: /*#__PURE__*/_jsx(InteractionProvider, {
-          children: /*#__PURE__*/_jsx(HighlightProvider, {
+          children: /*#__PURE__*/_jsx(HighlightedProvider, {
+            highlightedItem: highlightedItem,
+            onHighlightChange: onHighlightChange,
             children: /*#__PURE__*/_jsxs(ChartsSurface, {
               width: width,
               height: height,
@@ -88,6 +92,13 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * The height of the chart in px.
    */
   height: PropTypes.number.isRequired,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -100,6 +111,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -8,6 +8,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { useDrawingArea, useSvgRef } from '../hooks';
+import { useHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -36,6 +37,10 @@ function ChartsVoronoiHandler(props) {
   } = React.useContext(SeriesContext).scatter ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
+  const {
+    setHighlighted,
+    clearHighlighted
+  } = useHighlighted();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
@@ -129,6 +134,7 @@ function ChartsVoronoiHandler(props) {
       dispatch({
         type: 'exitChart'
       });
+      clearHighlighted();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
@@ -136,6 +142,7 @@ function ChartsVoronoiHandler(props) {
         dispatch({
           type: 'exitChart'
         });
+        clearHighlighted();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
@@ -145,6 +152,7 @@ function ChartsVoronoiHandler(props) {
             type: 'scatter'
           }
         });
+        clearHighlighted();
         return;
       }
       const {
@@ -159,6 +167,10 @@ function ChartsVoronoiHandler(props) {
           dataIndex
         }
       });
+      setHighlighted({
+        seriesId,
+        dataIndex
+      });
     };
     const handleMouseClick = event => {
       if (!onItemClick) {
@@ -187,7 +199,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('mousemove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick]);
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});

package/modern/LineChart/AreaElement.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { AnimatedArea } from './AnimatedArea';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
@@ -43,24 +43,18 @@ function AreaElement(props) {
       classes: innerClasses,
       color,
       gradientId,
-      highlightScope,
       slots,
       slotProps,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'line',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId: id
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     classes: innerClasses,
@@ -95,10 +89,6 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   color: PropTypes.string.isRequired,
   d: PropTypes.string.isRequired,
   gradientId: PropTypes.string,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/modern/LineChart/AreaPlot.js

@@ -97,7 +97,6 @@ function AreaPlot(props) {
       d,
       seriesId,
       color,
-      highlightScope,
       area,
       gradientUsed
     }) => !!area && /*#__PURE__*/_jsx(AreaElement, {
@@ -105,7 +104,6 @@ function AreaPlot(props) {
       d: d,
       color: color,
       gradientId: gradientUsed && getGradientId(...gradientUsed),
-      highlightScope: highlightScope,
       slots: slots,
       slotProps: slotProps,
       onClick: onItemClick && (event => onItemClick(event, {

package/modern/LineChart/LineChart.js

@@ -57,7 +57,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     slots,
     slotProps,
     skipAnimation,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -82,6 +84,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
@@ -183,6 +187,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -231,6 +242,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a line element is clicked.
    */