@mui/x-charts 8.11.3 → 8.13.0

package/esm/PieChart/PieArc.js

@@ -2,12 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
+const _excluded = ["className", "classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useAnimatePieArc } from "../hooks/index.js";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
@@ -16,7 +17,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
   return generateUtilityClass('MuiPieArc', slot);
 }
-export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series']);
+export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,23 +35,21 @@ const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
-})(({
-  theme
-}) => ({
-  // Got to move stroke to an element prop instead of style.
-  stroke: (theme.vars || theme).palette.background.paper,
+})({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${ANIMATION_DURATION_MS}ms`,
   transitionTimingFunction: ANIMATION_TIMING_FUNCTION
-}));
+});
 const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
   const {
+      className,
       classes: innerClasses,
       color,
       dataIndex,
       id,
       isFaded,
       isHighlighted,
+      isFocused,
       onClick,
       cornerRadius,
       startAngle,
@@ -58,16 +57,20 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
       innerRadius,
       outerRadius,
       paddingAngle,
-      skipAnimation
+      skipAnimation,
+      stroke: strokeProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  const stroke = strokeProp ?? (theme.vars || theme).palette.background.paper;
   const ownerState = {
     id,
     dataIndex,
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    isFocused
   };
   const classes = useUtilityClasses(ownerState);
   const interactionProps = useInteractionItemProps({
@@ -89,10 +92,11 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: classes.root,
+    className: clsx(classes.root, className),
     fill: ownerState.color,
     opacity: ownerState.isFaded ? 0.3 : 1,
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    stroke: stroke,
     strokeWidth: 1,
     strokeLinejoin: "round",
     "data-highlighted": ownerState.isHighlighted || undefined,
@@ -112,6 +116,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
+  isFocused: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   outerRadius: PropTypes.number.isRequired,
   paddingAngle: PropTypes.number.isRequired,

package/esm/PieChart/PieArcPlot.js

@@ -5,9 +5,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { PieArc } from "./PieArc.js";
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { PieArc, pieArcClasses } from "./PieArc.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {
       slots,
@@ -26,6 +28,7 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
@@ -36,12 +39,16 @@ function PieArcPlot(props) {
     faded,
     data
   });
+  const {
+    dataIndex: focusedIndex = -1
+  } = useFocusedItem() ?? {};
+  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+  return /*#__PURE__*/_jsxs("g", _extends({}, other, {
+    children: [transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -54,6 +61,7 @@ function PieArcPlot(props) {
       dataIndex: index,
       isFaded: item.isFaded,
       isHighlighted: item.isHighlighted,
+      isFocused: item.isFocused,
       onClick: onItemClick && (event => {
         onItemClick(event, {
           type: 'pie',
@@ -61,7 +69,24 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex))
+    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/_jsx(Arc, {
+      startAngle: focusedItem.startAngle,
+      endAngle: focusedItem.endAngle,
+      paddingAngle: focusedItem.paddingAngle,
+      innerRadius: focusedItem.innerRadius,
+      color: focusedItem.color,
+      outerRadius: focusedItem.outerRadius,
+      cornerRadius: focusedItem.cornerRadius,
+      skipAnimation: true,
+      stroke: (theme.vars ?? theme).palette.text.primary,
+      id: id,
+      className: pieArcClasses.focusIndicator,
+      dataIndex: focusedIndex,
+      isFaded: false,
+      isHighlighted: false,
+      isFocused: false,
+      strokeWidth: 3
+    })]
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/esm/PieChart/PieChart.js

@@ -120,6 +120,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/esm/PieChart/PieChart.plugins.d.ts

@@ -1,5 +1,6 @@
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature];
+export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/esm/PieChart/PieChart.plugins.js

@@ -1,3 +1,4 @@
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight];
+import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/PieChart/dataTransform/useTransformData.d.ts

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

package/esm/PieChart/dataTransform/useTransformData.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
+import { useIsItemFocusedGetter } from "../../hooks/useIsItemFocusedGetter.js";
 import { deg2rad } from "../../internals/angleConversion.js";
 export function useTransformData(series) {
   const {
@@ -20,6 +21,7 @@ export function useTransformData(series) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = useItemHighlightedGetter();
+  const isItemFocused = useIsItemFocusedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -27,6 +29,11 @@ export function useTransformData(series) {
     };
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
+    const isFocused = isItemFocused({
+      seriesType: 'pie',
+      seriesId,
+      dataIndex: itemIndex
+    });
     const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
@@ -39,12 +46,13 @@ export function useTransformData(series) {
       dataIndex: itemIndex,
       isFaded,
       isHighlighted,
+      isFocused,
       paddingAngle,
       innerRadius,
       outerRadius,
       cornerRadius,
       arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, seriesId]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, isItemFocused, seriesId]);
   return dataWithHighlight;
 }

package/esm/PieChart/index.d.ts

@@ -5,5 +5,6 @@ export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
 export * from "./getPieCoordinates.js";
+export * from "./PieChart.plugins.js";
 export { pieClasses } from "./pieClasses.js";
 export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/esm/PieChart/index.js

@@ -5,4 +5,5 @@ export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
 export * from "./getPieCoordinates.js";
+export * from "./PieChart.plugins.js";
 export { pieClasses } from "./pieClasses.js";

package/esm/RadarChart/RadarChart.plugins.d.ts

@@ -2,4 +2,4 @@ import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginsSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
+export type RadarChartPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { RadarChartPluginsSignatures } from "../RadarChart.plugins.js";
+import { RadarChartPluginSignatures } from "../RadarChart.plugins.js";
 import { RadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
 import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
 export type RadarSeries = MakeOptional<RadarSeriesType, 'type'>;
-export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeries]] objects.
@@ -22,5 +22,5 @@ export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSi
    */
   highlight?: 'axis' | 'series' | 'none';
 };
-declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
+declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
 export { RadarDataProvider };

package/esm/RadarChart/index.d.ts

@@ -15,4 +15,5 @@ export * from "./RadarGrid/index.js";
 export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
-export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarChart.plugins.js";

package/esm/RadarChart/index.js

@@ -16,4 +16,5 @@ export * from "./RadarGrid/index.js";
 export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
-export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarChart.plugins.js";

package/esm/RadarChart/useRadarChartProps.d.ts

@@ -5,7 +5,7 @@ import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
-import { RadarChartPluginsSignatures } from "./RadarChart.plugins.js";
+import { RadarChartPluginSignatures } from "./RadarChart.plugins.js";
 import { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesPlot/index.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -18,7 +18,7 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   highlight: "none" | "series" | "axis";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
-  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
+  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginSignatures>;
   radarGrid: RadarGridProps;
   radarSeriesAreaProps: RadarSeriesAreaProps;
   radarSeriesMarksProps: RadarSeriesMarksProps;

package/esm/ScatterChart/BatchScatter.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
+import { D3Scale } from "../models/axis.js";
+import { ScatterClasses } from "./scatterClasses.js";
+import { ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+export interface BatchScatterProps {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  colorGetter?: ColorGetter<'scatter'>;
+  classes?: Partial<ScatterClasses>;
+}
+export interface BatchScatterPathsProps {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  colorGetter?: ColorGetter<'scatter'>;
+  markerSize: number;
+}
+/**
+ * @internal
+ * A batch version of the Scatter component that uses SVG paths to render points.
+ * This component is optimized for performance and is suitable for rendering large datasets, but has limitations. Some of the limitations include:
+ * - Limited CSS styling;
+ * - Overriding the `marker` slot is not supported;
+ * - Highlight style must not contain opacity.
+ *
+ * You can read about all the limitations [here](https://mui.com/x/react-charts/scatter/#performance).
+ */
+export declare function BatchScatter(props: BatchScatterProps): React.JSX.Element;

package/esm/ScatterChart/BatchScatter.js

@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useUtilityClasses } from "./scatterClasses.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_POINTS_PER_PATH = 1000;
+/* In an SVG arc, if the arc starts and ends at the same point, it is not rendered, so we add a tiny
+ * value to one of the coordinates to ensure that the arc is rendered. */
+const ALMOST_ZERO = 0.01;
+function appendAtKey(map, key, value) {
+  let bucket = map.get(key);
+  if (!bucket) {
+    bucket = [value];
+    map.set(key, bucket);
+  } else {
+    bucket.push(value);
+  }
+  return bucket;
+}
+function createPath(x, y, markerSize) {
+  return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
+}
+function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
+  const {
+    instance
+  } = useChartContext();
+  const getXPosition = getValueToPositionMapper(xScale);
+  const getYPosition = getValueToPositionMapper(yScale);
+  const paths = new Map();
+  const temporaryPaths = new Map();
+  for (let i = 0; i < seriesData.length; i += 1) {
+    const scatterPoint = seriesData[i];
+    const x = getXPosition(scatterPoint.x);
+    const y = getYPosition(scatterPoint.y);
+    if (!instance.isPointInside(x, y)) {
+      continue;
+    }
+    const path = createPath(x, y, markerSize);
+    const fill = colorGetter ? colorGetter(i) : color;
+    const tempPath = appendAtKey(temporaryPaths, fill, path);
+    if (tempPath.length >= MAX_POINTS_PER_PATH) {
+      appendAtKey(paths, fill, tempPath.join(''));
+      temporaryPaths.delete(fill);
+    }
+  }
+  for (const [fill, tempPath] of temporaryPaths.entries()) {
+    if (tempPath.length > 0) {
+      appendAtKey(paths, fill, tempPath.join(''));
+    }
+  }
+  return paths;
+}
+function BatchScatterPaths(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    markerSize
+  } = props;
+  const paths = useCreatePaths(series.data, markerSize, xScale, yScale, color, colorGetter);
+  const children = [];
+  let i = 0;
+  for (const [fill, dArray] of paths.entries()) {
+    for (const d of dArray) {
+      children.push(/*#__PURE__*/_jsx("path", {
+        fill: fill,
+        d: d
+      }, i));
+      i += 1;
+    }
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  });
+}
+const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
+if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
+const Group = styled('g')({
+  '&[data-faded="true"]': {
+    opacity: 0.3
+  },
+  '& path': {
+    /* The browser must do hit testing to know which element a pointer is interacting with.
+     * With many data points, we create many paths causing significant time to be spent in the hit test phase.
+     * To fix this issue, we disable pointer events for the descendant paths.
+     *
+     * Ideally, users should be able to override this in case they need pointer events to be enabled,
+     * but it can affect performance negatively, especially with many data points. */
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ * @internal
+ * A batch version of the Scatter component that uses SVG paths to render points.
+ * This component is optimized for performance and is suitable for rendering large datasets, but has limitations. Some of the limitations include:
+ * - Limited CSS styling;
+ * - Overriding the `marker` slot is not supported;
+ * - Highlight style must not contain opacity.
+ *
+ * You can read about all the limitations [here](https://mui.com/x/react-charts/scatter/#performance).
+ */
+export function BatchScatter(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    classes: inClasses
+  } = props;
+  const {
+    store
+  } = useChartContext();
+  const isSeriesHighlighted = useSelector(store, selectorChartIsSeriesHighlighted, [series.id]);
+  const isSeriesFaded = useSelector(store, selectorChartIsSeriesFaded, [series.id]);
+  const seriesHighlightedItem = useSelector(store, selectorChartSeriesHighlightedItem, [series.id]);
+  const seriesUnfadedItem = useSelector(store, selectorChartSeriesUnfadedItem, [series.id]);
+  const highlightedModifier = 1.2;
+  const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
+  const classes = useUtilityClasses(inClasses);
+  const siblings = [];
+  if (seriesHighlightedItem != null) {
+    const datum = series.data[seriesHighlightedItem];
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: colorGetter ? colorGetter(seriesHighlightedItem) : color,
+      "data-highlighted": true,
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize * highlightedModifier)
+    }, `highlighted-${series.id}`));
+  }
+  if (seriesUnfadedItem != null) {
+    const datum = series.data[seriesUnfadedItem];
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)
+    }, `unfaded-${series.id}`));
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Group, {
+      className: classes.root,
+      "data-series": series.id,
+      "data-faded": isSeriesFaded || undefined,
+      "data-highlighted": isSeriesHighlighted || undefined,
+      children: /*#__PURE__*/_jsx(MemoBatchScatterPaths, {
+        series: series,
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        colorGetter: colorGetter,
+        markerSize: markerSize
+      })
+    }), siblings]
+  });
+}

package/esm/ScatterChart/Scatter.js

@@ -10,11 +10,12 @@ import { getInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
-import { selectorChartsVoronoiIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
+import { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { ScatterMarker } from "./ScatterMarker.js";
 import { useUtilityClasses } from "./scatterClasses.js";
 import { useScatterPlotData } from "./useScatterPlotData.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
+import { useIsItemFocusedGetter } from "../hooks/useIsItemFocusedGetter.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -42,12 +43,13 @@ function Scatter(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const isVoronoiEnabled = useSelector(store, selectorChartsVoronoiIsVoronoiEnabled);
+  const isVoronoiEnabled = useSelector(store, selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
+  const isFocused = useIsItemFocusedGetter();
   const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;
   const _useSlotProps = useSlotProps({
@@ -64,12 +66,17 @@ function Scatter(props) {
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
     className: classes.root,
-    children: scatterPlotData.map((dataPoint, i) => {
+    children: scatterPlotData.map(dataPoint => {
       const isItemHighlighted = isHighlighted(dataPoint);
       const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const isItemFocused = isFocused({
+        seriesType: 'scatter',
+        seriesId: series.id,
+        dataIndex: dataPoint.dataIndex
+      });
       return /*#__PURE__*/_jsx(Marker, _extends({
         dataIndex: dataPoint.dataIndex,
-        color: colorGetter ? colorGetter(i) : color,
+        color: colorGetter ? colorGetter(dataPoint.dataIndex) : color,
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -80,7 +87,8 @@ function Scatter(props) {
           dataIndex: dataPoint.dataIndex
         })),
         "data-highlighted": isItemHighlighted || undefined,
-        "data-faded": isItemFaded || undefined
+        "data-faded": isItemFaded || undefined,
+        "data-focused": isItemFocused || undefined
       }, skipInteractionHandlers ? undefined : getInteractionItemProps(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
     })
   });

package/esm/ScatterChart/ScatterChart.d.ts

@@ -13,8 +13,8 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+import { ScatterChartPluginSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
   /**
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -69,7 +69,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
-  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartVoronoiSignature['params']['onItemClick'];
+  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];
 }
 /**
  * Demos:

package/esm/ScatterChart/ScatterChart.js

@@ -103,6 +103,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableVoronoi: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -171,6 +172,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -200,10 +210,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: PropTypes.number,
+  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */