@mui/x-charts 7.5.1 → 7.6.0

package/LineChart/LineChart.js

@@ -66,7 +66,9 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     slots,
     slotProps,
     skipAnimation,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -91,6 +93,8 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
@@ -192,6 +196,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.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -240,6 +251,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.default.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when a line element is clicked.
    */

package/LineChart/LineElement.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { HighlightScope } from '../context/HighlightProvider';
 import { AnimatedLineProps } from './AnimatedLine';
 import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
@@ -33,7 +32,6 @@ export interface LineElementSlotProps {
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;
-    highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.
      * @default {}

package/LineChart/LineElement.js

@@ -15,11 +15,11 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _utils = require("@mui/base/utils");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 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; }
 function getLineElementUtilityClass(slot) {
@@ -54,24 +54,18 @@ function LineElement(props) {
       classes: innerClasses,
       color,
       gradientId,
-      highlightScope,
       slots,
       slotProps,
       onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'line',
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
     seriesId: id
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     classes: innerClasses,
@@ -106,10 +100,6 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
   gradientId: _propTypes.default.string,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/LineChart/LinePlot.js

@@ -103,7 +103,6 @@ function LinePlot(props) {
       d,
       seriesId,
       color,
-      highlightScope,
       gradientUsed
     }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
@@ -111,7 +110,6 @@ function LinePlot(props) {
         d: d,
         color: color,
         gradientId: gradientUsed && getGradientId(...gradientUsed),
-        highlightScope: highlightScope,
         skipAnimation: skipAnimation,
         slots: slots,
         slotProps: slotProps,

package/LineChart/MarkElement.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesId } from '../models/seriesType/common';
 export interface MarkElementClasses {
     /** Styles applied to the root element. */
@@ -33,7 +32,6 @@ export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighli
      * The index to the element in the series' data array.
      */
     dataIndex: number;
-    highlightScope?: Partial<HighlightScope>;
 };
 /**
  * Demos:

package/LineChart/MarkElement.js

@@ -20,8 +20,9 @@ var _web = require("@react-spring/web");
 var _utils = require("../internals/utils");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 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; }
 function getMarkElementUtilityClass(slot) {
@@ -71,24 +72,20 @@ function MarkElement(props) {
       color,
       shape,
       dataIndex,
-      highlightScope,
       onClick,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId: id
+  });
   const {
-    item,
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = axis.x?.index === dataIndex || (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
   const position = (0, _web.useSpring)({
     x,
     y,
@@ -97,7 +94,7 @@ function MarkElement(props) {
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
     isFaded,
     color
   };
@@ -128,10 +125,6 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    * The index to the element in the series' data array.
    */
   dataIndex: _propTypes.default.number.isRequired,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The shape of the marker.

package/LineChart/MarkPlot.js

@@ -148,7 +148,6 @@ function MarkPlot(props) {
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
               ,
-              highlightScope: series[seriesId].highlightScope,
               skipAnimation: skipAnimation,
               onClick: onItemClick && (event => onItemClick(event, {
                 type: 'line',

package/PieChart/PieArc.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
-import { HighlightScope } from '../context/HighlightProvider';
 import { PieItemId } from '../models';
+import { HighlightScope } from '../context';
 export interface PieArcClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -25,6 +25,9 @@ export declare const pieArcClasses: PieArcClasses;
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
     cornerRadius: SpringValue<number>;
     endAngle: SpringValue<number>;
+    /**
+     * @deprecated Use the `isFaded` or `isHighlighted` props instead.
+     */
     highlightScope?: Partial<HighlightScope>;
     innerRadius: SpringValue<number>;
     onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;

package/PieChart/PieArc.js

@@ -19,7 +19,7 @@ var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "highlightScope", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
 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; }
 function getPieArcUtilityClass(slot) {
@@ -56,7 +56,6 @@ function PieArc(props) {
       cornerRadius,
       dataIndex,
       endAngle,
-      highlightScope,
       id,
       innerRadius,
       isFaded,
@@ -76,7 +75,7 @@ function PieArc(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcRoot, (0, _extends2.default)({
     d: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => (0, _d3Shape.arc)().cornerRadius(cR)({
       padAngle: pA,
@@ -102,8 +101,13 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   dataIndex: _propTypes.default.number.isRequired,
+  /**
+   * @deprecated Use the `isFaded` or `isHighlighted` props instead.
+   */
   highlightScope: _propTypes.default.shape({
+    fade: _propTypes.default.oneOf(['global', 'none', 'series']),
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlight: _propTypes.default.oneOf(['item', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

package/PieChart/PieArcLabelPlot.d.ts

@@ -7,7 +7,7 @@ export interface PieArcLabelPlotSlots {
 export interface PieArcLabelPlotSlotProps {
     pieArcLabel?: Partial<PieArcLabelProps>;
 }
-export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
+export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id'>, ComputedPieRadius {
     /**
      * Override the arc attributes when it is faded.
      * @default { additionalRadius: -5 }

package/PieChart/PieArcLabelPlot.js

@@ -15,7 +15,7 @@ var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "highlightScope", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 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; }
@@ -52,7 +52,6 @@ function PieArcLabelPlot(props) {
         additionalRadius: -5
       },
       highlighted,
-      highlightScope,
       id,
       innerRadius,
       outerRadius,
@@ -69,7 +68,6 @@ function PieArcLabelPlot(props) {
     cornerRadius,
     paddingAngle,
     id,
-    highlightScope,
     highlighted,
     faded,
     data
@@ -171,10 +169,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     outerRadius: _propTypes.default.number,
     paddingAngle: _propTypes.default.number
   }),
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/PieChart/PieArcPlot.d.ts

@@ -7,7 +7,7 @@ export interface PieArcPlotSlots {
 export interface PieArcPlotSlotProps {
     pieArc?: Partial<PieArcProps>;
 }
-export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
+export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id'>, ComputedPieRadius {
     /**
      * Override the arc attributes when it is faded.
      * @default { additionalRadius: -5 }

package/PieChart/PieArcPlot.js

@@ -13,8 +13,9 @@ var _web = require("@react-spring/web");
 var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 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; }
@@ -27,7 +28,6 @@ function PieArcPlot(props) {
       cornerRadius = 0,
       paddingAngle = 0,
       id,
-      highlightScope,
       highlighted,
       faded = {
         additionalRadius: -5
@@ -43,7 +43,6 @@ function PieArcPlot(props) {
     cornerRadius,
     paddingAngle,
     id,
-    highlightScope,
     highlighted,
     faded,
     data
@@ -51,6 +50,9 @@ function PieArcPlot(props) {
   const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, _transition.defaultTransitionConfig, {
     immediate: skipAnimation
   }));
+  const {
+    highlightScope
+  } = (0, _context.useHighlighted)();
   if (data.length === 0) {
     return null;
   }
@@ -142,10 +144,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     outerRadius: _propTypes.default.number,
     paddingAngle: _propTypes.default.number
   }),
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/PieChart/PieChart.js

@@ -70,7 +70,9 @@ function PieChart(props) {
     slots,
     slotProps,
     onItemClick,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const isRTL = (0, _useIsRTL.useIsRTL)();
   const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
@@ -97,6 +99,8 @@ function PieChart(props) {
     colors: colors,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -164,6 +168,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -203,6 +214,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when a pie arc is clicked.
    */

package/PieChart/PiePlot.js

@@ -58,8 +58,7 @@ function PiePlot(props) {
         cx: cxParam,
         cy: cyParam,
         highlighted,
-        faded,
-        highlightScope
+        faded
       } = series[seriesId];
       const {
         cx,
@@ -84,7 +83,6 @@ function PiePlot(props) {
           id: seriesId,
           data: data,
           skipAnimation: skipAnimation,
-          highlightScope: highlightScope,
           highlighted: highlighted,
           faded: faded,
           onItemClick: onItemClick,
@@ -103,8 +101,7 @@ function PiePlot(props) {
         arcLabelMinAngle,
         data,
         cx: cxParam,
-        cy: cyParam,
-        highlightScope
+        cy: cyParam
       } = series[seriesId];
       const {
         cx,
@@ -133,7 +130,6 @@ function PiePlot(props) {
           skipAnimation: skipAnimation,
           arcLabel: arcLabel,
           arcLabelMinAngle: arcLabelMinAngle,
-          highlightScope: highlightScope,
           slots: slots,
           slotProps: slotProps
         })

package/PieChart/dataTransform/useTransformData.d.ts

@@ -12,4 +12,4 @@ export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObj
     isFaded: boolean;
     isHighlighted: boolean;
 }
-export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];
+export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];

package/PieChart/dataTransform/useTransformData.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTransformData = useTransformData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../../context/InteractionProvider");
-var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+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; }
 function useTransformData(series) {
   const {
     id: seriesId,
-    highlightScope,
     data,
     faded,
     highlighted,
@@ -25,29 +23,16 @@ function useTransformData(series) {
     cornerRadius: baseCornerRadius = 0
   } = series;
   const {
-    item: highlightedItem
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const getHighlightStatus = React.useCallback(dataIndex => {
-    const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(highlightedItem, {
-      type: 'pie',
-      seriesId,
-      dataIndex
-    }, highlightScope);
-    const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(highlightedItem, {
-      type: 'pie',
+    isFaded: isItemFaded,
+    isHighlighted: isItemHighlighted
+  } = (0, _context.useHighlighted)();
+  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
+    const currentItem = {
       seriesId,
-      dataIndex
-    }, highlightScope);
-    return {
-      isHighlighted,
-      isFaded
+      dataIndex: itemIndex
     };
-  }, [highlightScope, highlightedItem, seriesId]);
-  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
-    const {
-      isHighlighted,
-      isFaded
-    } = getHighlightStatus(itemIndex);
+    const isHighlighted = isItemHighlighted(currentItem);
+    const isFaded = !isHighlighted && isItemFaded(currentItem);
     const attributesOverride = (0, _extends2.default)({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
@@ -65,6 +50,6 @@ function useTransformData(series) {
       cornerRadius,
       arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, seriesId]);
   return dataWithHighlight;
 }

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -83,6 +83,13 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.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.
@@ -95,6 +102,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/ScatterChart/Scatter.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -34,16 +35,15 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const highlightScope = React.useMemo(() => (0, _extends2.default)({
-    highlighted: 'item',
-    faded: 'global'
-  }, series.highlightScope), [series.highlightScope]);
   const {
-    item,
     useVoronoiInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
   const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope, skipInteractionHandlers);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(skipInteractionHandlers);
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useHighlighted)();
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
@@ -65,12 +65,16 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
-        const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, highlightScope);
+        const currentItem = {
+          seriesId: pointCtx.seriesId,
+          dataIndex: pointCtx.dataIndex
+        };
+        const isItemHighlighted = isHighlighted(currentItem);
         temp.push({
           x,
           y,
-          isHighlighted,
-          isFaded: !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, highlightScope),
+          isHighlighted: isItemHighlighted,
+          isFaded: !isItemHighlighted && isFaded(currentItem),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id,
           dataIndex: i,
@@ -79,7 +83,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps, color, colorGetter]);
+  }, [xScale, yScale, series.data, series.id, getInteractionItemProps, color, colorGetter, isFaded, isHighlighted]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,