@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.10

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -5,20 +5,21 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
 import { useAxisTooltip } from "./useAxisTooltip.js";
 import { useXAxis, useYAxis } from "../hooks/index.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
     classes: propClasses,
     sx
   } = props;
-  const tootlipData = useAxisTooltip();
+  const tooltipData = useAxisTooltip();
   const xAxis = useXAxis();
   const yAxis = useYAxis();
   const classes = useUtilityClasses(propClasses);
-  if (tootlipData === null) {
+  if (tooltipData === null) {
     return null;
   }
   const {
@@ -26,7 +27,7 @@ function ChartsAxisTooltipContent(props) {
     axisValue,
     axisFormattedValue,
     seriesItems
-  } = tootlipData;
+  } = tooltipData;
   const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
@@ -35,8 +36,10 @@ function ChartsAxisTooltipContent(props) {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
+          className: classes.row,
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
             colSpan: 3,
+            className: clsx(classes.cell, classes.axisValueCell),
             children: /*#__PURE__*/_jsx(Typography, {
               children: axisFormattedValue
             })
@@ -47,7 +50,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -56,7 +60,8 @@ function ChartsAxisTooltipContent(props) {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
+              children: color && /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
                 color: color,
                 className: classes.mark
               })

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { useItemTooltip } from "./useItemTooltip.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -20,7 +21,8 @@ function ChartsItemTooltipContent(props) {
   const {
     color,
     label,
-    formattedValue
+    formattedValue,
+    markType
   } = tooltipData;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
@@ -32,7 +34,8 @@ function ChartsItemTooltipContent(props) {
           className: classes.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes.mark
             })

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
 import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
 import { ChartsTooltipContainer } from "./ChartsTooltipContainer.js";
@@ -43,26 +44,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Override or extend the styles applied to the component.
    */

package/modern/ChartsTooltip/ChartsTooltipContainer.js

@@ -5,16 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["trigger", "classes", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { usePointerType } from "./utils.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
 import { useXAxis } from "../hooks/index.js";
-import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -124,26 +125,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: PropTypes.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, PropTypes.func, PropTypes.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: PropTypes.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Popper render function or node.
    */

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
 import { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 
 /**
@@ -12,11 +11,10 @@ export const ChartsTooltipPaper = styled('div', {
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
-  borderRadius: theme.shape.borderRadius
+  borderRadius: theme.shape.borderRadius,
+  border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 
 /**
@@ -46,10 +44,10 @@ export const ChartsTooltipRow = styled('tr', {
   theme
 }) => ({
   'tr:first-of-type& td': {
-    paddingTop: theme.spacing(1)
+    paddingTop: theme.spacing(0.5)
   },
   'tr:last-of-type& td': {
-    paddingBottom: theme.spacing(1)
+    paddingBottom: theme.spacing(0.5)
   }
 }));
 
@@ -66,38 +64,22 @@ export const ChartsTooltipCell = styled('td', {
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${chartsTooltipClasses.labelCell}`]: {
-    paddingLeft: theme.spacing(1)
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  [`&.${chartsTooltipClasses.valueCell}, &.${chartsTooltipClasses.axisValueCell}`]: {
+    color: (theme.vars || theme).palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium
   },
   [`&.${chartsTooltipClasses.valueCell}`]: {
-    paddingLeft: theme.spacing(4),
-    color: (theme.vars || theme).palette.text.primary
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5)
   },
   'td:first-of-type&': {
-    paddingLeft: theme.spacing(2)
+    paddingLeft: theme.spacing(1.5)
   },
   'td:last-of-type&': {
-    paddingRight: theme.spacing(2)
+    paddingRight: theme.spacing(1.5)
   }
-}));
-
-/**
- * @ignore - internal component.
- */
-export const ChartsTooltipMark = styled('div', {
-  name: 'MuiChartsTooltip',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'color'
-})(({
-  theme,
-  color
-}) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  boxShadow: theme.shadows[1],
-  backgroundColor: color,
-  borderColor: (theme.vars || theme).palette.background.paper,
-  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
-  boxSizing: 'content-box'
 }));

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -4,7 +4,7 @@ import composeClasses from '@mui/utils/composeClasses';
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -15,7 +15,8 @@ export const useUtilityClasses = classes => {
     mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
-    valueCell: ['valueCell']
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
   };
   return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };

package/modern/ChartsTooltip/index.js

@@ -6,4 +6,5 @@ export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
 export * from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
-export { useMouseTracker } from "./utils.js";
+export { useMouseTracker } from "./utils.js";
+export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -1,17 +1,15 @@
 'use client';
 
-import * as React from 'react';
 import { useSeries } from "../hooks/useSeries.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
-import { useStore } from "../internals/useStore.js";
-import { useSelector } from "../internals/useSelector.js";
+import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
-import { useXAxis, useYAxis } from "../hooks/useAxis.js";
-import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../context/InteractionSelectors.js";
+import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export function useAxisTooltip() {
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();
@@ -20,13 +18,15 @@ export function useAxisTooltip() {
   const axisData = useSelector(store, xAxisHasData ? selectorChartsInteractionXAxis : selectorChartsInteractionYAxis);
   const series = useSeries();
   const {
-    xAxis,
+    xAxis
+  } = useXAxes();
+  const {
     yAxis
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxes();
   const colorProcessors = useColorProcessor();
   if (axisData === null) {
     return null;
@@ -64,12 +64,15 @@ export function useAxisTooltip() {
           color,
           value,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
         };
       }
       return undefined;
     });
-  }).filter(item => item != null);
+  }).filter(function truthy(item) {
+    return Boolean(item);
+  });
   const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
     location: 'tooltip'

package/modern/ChartsTooltip/useItemTooltip.js

@@ -1,65 +1,40 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import { useSeries } from "../hooks/useSeries.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
-import { getLabel } from "../internals/getLabel.js";
-import { selectorChartsInteractionItem } from "../context/InteractionSelectors.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 export function useItemTooltip() {
   const store = useStore();
-  const item = useSelector(store, selectorChartsInteractionItem);
+  const identifier = useSelector(store, selectorChartsInteractionItem);
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
   const series = useSeries();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
-  const colorProcessors = useColorProcessor();
+  } = useZAxes();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!item || item.dataIndex === undefined) {
+  if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
-  const itemSeries = series[item.type].series[item.seriesId];
-  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  if (itemSeries.type === 'pie') {
-    const point = itemSeries.data[item.dataIndex];
-    const label = getLabel(point.label, 'tooltip');
-    const value = _extends({}, point, {
-      label
-    });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
-      dataIndex: item.dataIndex
-    });
-    return {
-      identifier: item,
-      color: getColor(item.dataIndex),
-      label,
-      value,
-      formattedValue
-    };
-  }
-  const label = getLabel(itemSeries.label, 'tooltip');
-  const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
-    dataIndex: item.dataIndex
+  const itemSeries = series[identifier.type].series[identifier.seriesId];
+  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  return seriesConfig[itemSeries.type].tooltipGetter({
+    series: itemSeries,
+    getColor,
+    identifier
   });
-  return {
-    identifier: item,
-    color: getColor(item.dataIndex),
-    label,
-    value,
-    formattedValue
-  };
 }

package/modern/ChartsTooltip/utils.js

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

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -5,13 +5,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
-import { useDrawingArea, useSvgRef } from "../hooks/index.js";
-import { useHighlighted } from "../context/index.js";
 import { useScatterSeries } from "../hooks/useSeries.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -20,12 +21,17 @@ function ChartsVoronoiHandler(props) {
   } = props;
   const svgRef = useSvgRef();
   const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const store = useStore();
   const {
     series,
@@ -34,10 +40,6 @@ function ChartsVoronoiHandler(props) {
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
   const lastFind = React.useRef(undefined);
-  const {
-    setHighlighted,
-    clearHighlighted
-  } = useHighlighted();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
@@ -79,7 +81,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -99,16 +101,16 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new Delaunay(points);
     lastFind.current = undefined;
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -151,7 +153,7 @@ function ChartsVoronoiHandler(props) {
           item: null
         })
       }));
-      clearHighlighted();
+      instance.clearHighlight();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
@@ -165,7 +167,7 @@ function ChartsVoronoiHandler(props) {
             item: null
           })
         }));
-        clearHighlighted();
+        instance.clearHighlight();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
@@ -174,7 +176,7 @@ function ChartsVoronoiHandler(props) {
             item: null
           })
         }));
-        clearHighlighted();
+        instance.clearHighlight();
         return;
       }
       const {
@@ -190,7 +192,7 @@ function ChartsVoronoiHandler(props) {
           }
         })
       }));
-      setHighlighted({
+      instance.setHighlight({
         seriesId,
         dataIndex
       });
@@ -222,7 +224,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, drawingArea, store, instance]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});