@mui/x-charts 7.0.0-alpha.3 → 7.0.0-alpha.5

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Delaunay } from 'd3-delaunay';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { InteractionContext } from '../context/InteractionProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { getSVGPoint } from '../internals/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsVoronoiHandler(props) {
+  const {
+    voronoiMaxRadius
+  } = props;
+  const svgRef = React.useContext(SVGContext);
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(DrawingContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const {
+    dispatch
+  } = React.useContext(InteractionContext);
+  const {
+    series,
+    seriesOrder
+  } = React.useContext(SeriesContext).scatter ?? {};
+  const voronoiRef = React.useRef({});
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  useEnhancedEffect(() => {
+    dispatch({
+      type: 'updateVoronoiUsage',
+      useVoronoiInteraction: true
+    });
+    return () => {
+      dispatch({
+        type: 'updateVoronoiUsage',
+        useVoronoiInteraction: false
+      });
+    };
+  }, [dispatch]);
+  useEnhancedEffect(() => {
+    if (seriesOrder === undefined || series === undefined) {
+      // If there is no scatter chart series
+      return;
+    }
+    voronoiRef.current = {};
+    let points = [];
+    seriesOrder.forEach(seriesId => {
+      const {
+        data,
+        xAxisKey,
+        yAxisKey
+      } = series[seriesId];
+      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const getXPosition = getValueToPositionMapper(xScale);
+      const getYPosition = getValueToPositionMapper(yScale);
+      const seriesPoints = data.flatMap(({
+        x,
+        y
+      }) => [getXPosition(x), getYPosition(y)]);
+      voronoiRef.current[seriesId] = {
+        startIndex: points.length,
+        endIndex: points.length + seriesPoints.length
+      };
+      points = points.concat(seriesPoints);
+    });
+    voronoiRef.current.delauney = new Delaunay(points);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    const handleMouseOut = () => {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+
+    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
+    const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const svgPoint = getSVGPoint(svgRef.current, event);
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (!voronoiRef.current.delauney) {
+        return;
+      }
+      const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y);
+      if (closestPointIndex !== undefined) {
+        const seriesId = Object.keys(voronoiRef.current).find(id => {
+          if (id === 'delauney') {
+            return false;
+          }
+          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+        });
+        if (seriesId === undefined) {
+          return;
+        }
+        const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+        if (voronoiMaxRadius !== undefined) {
+          const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+          const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+          const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
+          if (dist2 > voronoiMaxRadius ** 2) {
+            // The closest point is too far to be considered.
+            dispatch({
+              type: 'leaveItem',
+              data: {
+                type: 'scatter',
+                seriesId,
+                dataIndex
+              }
+            });
+            return;
+          }
+        }
+        dispatch({
+          type: 'enterItem',
+          data: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        });
+      }
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
+  return /*#__PURE__*/_jsx("g", {}); // Workaround to fix docs scripts
+}
+process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number
+} : void 0;
+export { ChartsVoronoiHandler };

package/modern/ChartsVoronoiHandler/index.js

@@ -0,0 +1 @@
+export * from './ChartsVoronoiHandler';

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -11,9 +11,10 @@ import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -10,7 +10,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/modern/LineChart/AreaPlot.js

@@ -9,6 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -61,10 +62,10 @@ function AreaPlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+            throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
         const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));

package/modern/LineChart/LineHighlightPlot.js

@@ -8,6 +8,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -69,7 +70,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale

package/modern/LineChart/LinePlot.js

@@ -9,6 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -60,10 +61,10 @@ function LinePlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+            throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
         const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/modern/LineChart/MarkPlot.js

@@ -7,6 +7,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -75,7 +76,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
         }
         return xData?.map((x, index) => {
           const value = data[index] == null ? null : stackedData[index][1];

package/modern/LineChart/formatter.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+let warnedOnce = false;
+
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter = (params, dataset) => {
   const {
@@ -25,7 +27,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI-X-Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -45,7 +47,17 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
-        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
+        data: dataKey ? dataset.map(data => {
+          const value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
+              warnedOnce = true;
+              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+            }
+            return 0;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/modern/PieChart/PieArcLabelPlot.js

@@ -152,7 +152,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   innerRadius: PropTypes.number,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: PropTypes.number.isRequired,
   /**

package/modern/PieChart/PieArcPlot.js

@@ -144,7 +144,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   onClick: PropTypes.func,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: PropTypes.number.isRequired,
   /**

package/modern/PieChart/PieChart.js

@@ -240,8 +240,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     arcLabelMinAngle: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
-    cx: PropTypes.number,
-    cy: PropTypes.number,
+    cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     data: PropTypes.arrayOf(PropTypes.shape({
       color: PropTypes.string,
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -270,8 +270,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
     }),
     id: PropTypes.string,
-    innerRadius: PropTypes.number,
-    outerRadius: PropTypes.number,
+    innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     paddingAngle: PropTypes.number,
     sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
     startAngle: PropTypes.number,

package/modern/PieChart/PiePlot.js

@@ -4,6 +4,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
+import { getPercentageValue } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -34,10 +35,6 @@ function PiePlot(props) {
     return null;
   }
   const availableRadius = Math.min(width, height) / 2;
-  const center = {
-    x: left + width / 2,
-    y: top + height / 2
-  };
   const {
     series,
     seriesOrder
@@ -45,22 +42,26 @@ function PiePlot(props) {
   return /*#__PURE__*/_jsxs("g", {
     children: [seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlighted,
         faded,
         highlightScope
       } = series[seriesId];
+      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
+      const cx = getPercentageValue(cxParam ?? '50%', width);
+      const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius ?? availableRadius,
+          outerRadius: outerRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -76,19 +77,23 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
+      const cx = getPercentageValue(cxParam ?? '50%', width);
+      const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,

package/modern/ResponsiveChartContainer/index.js

@@ -60,11 +60,11 @@ const useChartDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI: Charts does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI-X-Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI: Charts does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI-X-Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }

package/modern/ScatterChart/Scatter.js

@@ -23,10 +23,16 @@ function Scatter(props) {
     color,
     markerSize
   } = props;
+  const highlightScope = React.useMemo(() => _extends({
+    highlighted: 'item',
+    faded: 'global'
+  }, series.highlightScope), [series.highlightScope]);
   const {
-    item
+    item,
+    useVoronoiInteraction
   } = React.useContext(InteractionContext);
-  const getInteractionItemProps = useInteractionItemProps(series.highlightScope);
+  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const getInteractionItemProps = useInteractionItemProps(highlightScope, skipInteractionHandlers);
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
@@ -48,22 +54,24 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
+        const isHighlighted = getIsHighlighted(item, pointCtx, highlightScope);
         temp.push({
           x,
           y,
-          isFaded: !getIsHighlighted(item, pointCtx, series.highlightScope) && getIsFaded(item, pointCtx, series.highlightScope),
+          isHighlighted,
+          isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id
         });
       }
     }
     return temp;
-  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,
       cy: 0,
-      r: markerSize,
+      r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
       fill: color,
       opacity: dataPoint.isFaded && 0.3 || 1
@@ -84,6 +92,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])

package/modern/ScatterChart/ScatterChart.js

@@ -7,6 +7,7 @@ import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -26,6 +27,8 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     series,
     tooltip,
     axisHighlight,
+    voronoiMaxRadius,
+    disableVoronoi,
     legend,
     width,
     height,
@@ -52,7 +55,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+    children: [!disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, {
+      voronoiMaxRadius: voronoiMaxRadius
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
@@ -126,6 +131,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -218,6 +228,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -283,6 +294,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    * @default undefined

package/modern/SparkLineChart/SparkLineChart.js

@@ -78,6 +78,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      skipAnimation: true,
       slots: slots,
       slotProps: slotProps,
       sx: {

package/modern/context/CartesianContextProvider.js

@@ -52,7 +52,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
@@ -64,7 +64,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/modern/context/InteractionProvider.js

@@ -7,6 +7,7 @@ export const InteractionContext = /*#__PURE__*/React.createContext({
     x: null,
     y: null
   },
+  useVoronoiInteraction: false,
   dispatch: () => null
 });
 const dataReducer = (prevState, action) => {
@@ -15,6 +16,21 @@ const dataReducer = (prevState, action) => {
       return _extends({}, prevState, {
         item: action.data
       });
+    case 'exitChart':
+      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      });
+    case 'updateVoronoiUsage':
+      return _extends({}, prevState, {
+        useVoronoiInteraction: action.useVoronoiInteraction
+      });
     case 'leaveItem':
       if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
         // The item is already something else
@@ -24,6 +40,9 @@ const dataReducer = (prevState, action) => {
         item: null
       });
     case 'updateAxis':
+      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
+        return prevState;
+      }
       return _extends({}, prevState, {
         axis: action.data
       });
@@ -39,7 +58,8 @@ export function InteractionProvider({
     axis: {
       x: null,
       y: null
-    }
+    },
+    useVoronoiInteraction: false
   });
   const value = React.useMemo(() => _extends({}, data, {
     dispatch

package/modern/context/SeriesContextProvider.js

@@ -39,7 +39,7 @@ const formatSeries = (series, colors, dataset) => {
       };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI: series' id "${id}" is not unique`);
+      throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
     }
     seriesGroups[type].series[id] = _extends({
       id