@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/ScatterChart/BatchScatter.js

@@ -1,15 +1,17 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BatchScatter = BatchScatter;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _appendAtKey = require("../internals/appendAtKey");
@@ -24,7 +26,7 @@ function createPath(x, y, markerSize) {
 function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
   const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
   const paths = new Map();
@@ -113,18 +115,18 @@ function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
-    classes: inClasses
+    className
   } = props;
   const {
     store
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.id);
   const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.id);
   const seriesHighlightedItem = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, series.id);
   const seriesUnfadedItem = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
-  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _scatterClasses.useUtilityClasses)(props);
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
@@ -147,7 +149,7 @@ function BatchScatter(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
-      className: classes.root,
+      className: (0, _clsx.default)(classes.series, className),
       "data-series": series.id,
       "data-faded": isSeriesFaded || undefined,
       "data-highlighted": isSeriesHighlighted || undefined,

package/ScatterChart/BatchScatter.mjs

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
+import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { useUtilityClasses } from "./scatterClasses.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
 import { appendAtKey } from "../internals/appendAtKey.mjs";
@@ -18,7 +19,7 @@ function createPath(x, y, markerSize) {
 function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const getXPosition = getValueToPositionMapper(xScale);
   const getYPosition = getValueToPositionMapper(yScale);
   const paths = new Map();
@@ -107,18 +108,18 @@ export function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
-    classes: inClasses
+    className
   } = props;
   const {
     store
-  } = useChartContext();
+  } = useChartsContext();
   const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.id);
   const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.id);
   const seriesHighlightedItem = store.use(selectorChartSeriesHighlightedItem, series.id);
   const seriesUnfadedItem = store.use(selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
-  const classes = useUtilityClasses(inClasses);
+  const classes = useUtilityClasses(props);
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
@@ -141,7 +142,7 @@ export function BatchScatter(props) {
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(Group, {
-      className: classes.root,
+      className: clsx(classes.series, className),
       "data-series": series.id,
       "data-faded": isSeriesFaded || undefined,
       "data-highlighted": isSeriesHighlighted || undefined,

package/ScatterChart/FocusedScatterMark.d.mts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function FocusedScatterMark(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/FocusedScatterMark.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function FocusedScatterMark(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/FocusedScatterMark.js

@@ -1,19 +1,27 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusedScatterMark = FocusedScatterMark;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _hooks = require("../hooks");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-function FocusedScatterMark(props) {
+const _excluded = ["className"];
+function FocusedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
   const scatterSeries = (0, _hooks.useScatterSeriesContext)();
@@ -25,6 +33,7 @@ function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
+  const classes = (0, _scatterClasses.useUtilityClasses)();
   if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
@@ -38,6 +47,7 @@ function FocusedScatterMark(props) {
   const y = getYPosition(scatterPoint.y);
   const size = series.markerSize + 3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,

package/ScatterChart/FocusedScatterMark.mjs

@@ -1,12 +1,20 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
 import { getValueToPositionMapper, useScatterSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
+import { useUtilityClasses } from "./scatterClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function FocusedScatterMark(props) {
+export function FocusedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const focusedItem = useFocusedItem();
   const scatterSeries = useScatterSeriesContext();
@@ -18,6 +26,7 @@ export function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = useYAxes();
+  const classes = useUtilityClasses();
   if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
@@ -31,6 +40,7 @@ export function FocusedScatterMark(props) {
   const y = getYPosition(scatterPoint.y);
   const size = series.markerSize + 3;
   return /*#__PURE__*/_jsx("rect", _extends({
+    className: clsx(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,

package/ScatterChart/Scatter.d.mts

@@ -3,7 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.mjs";
 import { type D3Scale } from "../models/axis.mjs";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-import { type ScatterClasses } from "./scatterClasses.mjs";
+import type { ScatterClasses } from "./scatterClasses.mjs";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/ScatterChart/Scatter.d.ts

@@ -3,7 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-import { type ScatterClasses } from "./scatterClasses.js";
+import type { ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/ScatterChart/Scatter.js

@@ -11,15 +11,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
-var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../hooks/useItemHighlightStateGetter");
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _ScatterMarker = require("./ScatterMarker");
 var _scatterClasses = require("./scatterClasses");
 var _useScatterPlotData = require("./useScatterPlotData");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -45,14 +46,11 @@ function Scatter(props) {
   } = props;
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const isVoronoiEnabled = store.use(_useChartClosestPoint.selectorChartsIsVoronoiEnabled);
-  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const skipInteractionHandlers = isVoronoiEnabled;
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const scatterPlotData = (0, _useScatterPlotData.useScatterPlotData)(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? _ScatterMarker.ScatterMarker;
   const _useSlotProps = (0, _useSlotProps2.default)({
@@ -65,14 +63,18 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
-  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _scatterClasses.useUtilityClasses)({
+    classes: inClasses
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
-    className: classes.root,
+    className: classes.series,
     children: scatterPlotData.map(dataPoint => {
-      const isItemHighlighted = isHighlighted(dataPoint);
-      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const highlightState = getHighlightState(dataPoint);
+      const isItemHighlighted = highlightState === 'highlighted';
+      const isItemFaded = highlightState === 'faded';
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
+        className: (0, _clsx.default)(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,

package/ScatterChart/Scatter.mjs

@@ -5,15 +5,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { getInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.mjs";
+import { useItemHighlightStateGetter } from "../hooks/useItemHighlightStateGetter.mjs";
 import { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.mjs";
 import { ScatterMarker } from "./ScatterMarker.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
 import { useScatterPlotData } from "./useScatterPlotData.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -38,14 +39,11 @@ function Scatter(props) {
   } = props;
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const isVoronoiEnabled = store.use(selectorChartsIsVoronoiEnabled);
-  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  const skipInteractionHandlers = isVoronoiEnabled;
+  const getHighlightState = useItemHighlightStateGetter();
   const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;
   const _useSlotProps = useSlotProps({
@@ -58,14 +56,18 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const classes = useUtilityClasses(inClasses);
+  const classes = useUtilityClasses({
+    classes: inClasses
+  });
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
-    className: classes.root,
+    className: classes.series,
     children: scatterPlotData.map(dataPoint => {
-      const isItemHighlighted = isHighlighted(dataPoint);
-      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const highlightState = getHighlightState(dataPoint);
+      const isItemHighlighted = highlightState === 'highlighted';
+      const isItemFaded = highlightState === 'faded';
       return /*#__PURE__*/_jsx(Marker, _extends({
+        className: clsx(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,

package/ScatterChart/ScatterChart.d.mts

@@ -3,7 +3,7 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.mjs";
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.mjs";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type ChartsAxisProps } from "../ChartsAxis/index.mjs";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.mjs";
@@ -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', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | '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.
@@ -40,9 +40,21 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * Option to display a cartesian grid in the background.
    */
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi?: boolean;
   /**
@@ -66,7 +78,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
   slotProps?: ScatterChartSlotProps;
   /**
    * Callback fired when clicking on a scatter item.
-   * @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 {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];

package/ScatterChart/ScatterChart.d.ts

@@ -3,7 +3,7 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.js";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type ChartsAxisProps } from "../ChartsAxis/index.js";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
@@ -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', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | '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.
@@ -40,9 +40,21 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * Option to display a cartesian grid in the background.
    */
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi?: boolean;
   /**
@@ -66,7 +78,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
   slotProps?: ScatterChartSlotProps;
   /**
    * Callback fired when clicking on a scatter item.
-   * @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 {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];