@mui/x-charts 8.14.0 → 8.15.0

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.types.d.ts

@@ -0,0 +1,72 @@
+import { ChartPluginSignature } from "../../models/index.js";
+export type Point = {
+  x: number;
+  y: number;
+};
+export interface UseChartBrushState {
+  brush: {
+    /**
+     * Whether the brush interaction is enabled.
+     */
+    enabled: boolean;
+    /**
+     * Whether to prevent tooltip from showing during brush interaction.
+     */
+    preventTooltip: boolean;
+    /**
+     * Whether to prevent highlighting during brush interaction.
+     */
+    preventHighlight: boolean;
+    /**
+     * The starting coordinate of the brush interaction.
+     */
+    start: Point | null;
+    /**
+     * The current coordinate of the brush interaction.
+     */
+    current: Point | null;
+  };
+}
+export interface UseChartBrushInstance {
+  /**
+   * Set the brush coordinates.
+   * @param {Point | null} point The point coordinate, if start value is null, it will set both start and current to this value.
+   */
+  setBrushCoordinates: (point: Point | null) => void;
+  /**
+   * Clear the brush coordinates.
+   */
+  clearBrush: () => void;
+}
+export interface BrushConfig {
+  /**
+   * Whether the brush interaction is enabled.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Whether to prevent tooltip from showing during brush interaction.
+   * @default false
+   */
+  preventTooltip?: boolean;
+  /**
+   * Whether to prevent highlighting during brush interaction.
+   * @default false
+   */
+  preventHighlight?: boolean;
+}
+export interface UseChartBrushParameters {
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig?: BrushConfig;
+}
+export type UseChartBrushDefaultizedParameters = {
+  brushConfig: Required<BrushConfig>;
+};
+export type UseChartBrushSignature = ChartPluginSignature<{
+  params: UseChartBrushParameters;
+  defaultizedParams: UseChartBrushDefaultizedParameters;
+  state: UseChartBrushState;
+  instance: UseChartBrushInstance;
+}>;

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.js

@@ -3,9 +3,10 @@ export const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc
   // @ts-ignore
   const {
     zoom,
-    id: axisId
+    id: axisId,
+    reverse
   } = v;
-  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection);
+  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection, reverse);
   if (defaultizedZoom) {
     acc[axisId] = defaultizedZoom;
   }

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -25,7 +25,7 @@ export function defaultizeXAxis(inAxes, dataset) {
       id,
       position,
       height: axisConfig.height ?? defaultHeight,
-      zoom: defaultizeZoom(axisConfig.zoom, id, 'x')
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'x', axisConfig.reverse)
     });
 
     // Increment the offset for the next axis
@@ -75,7 +75,7 @@ export function defaultizeYAxis(inAxes, dataset) {
       id,
       position,
       width: axisConfig.width ?? defaultWidth,
-      zoom: defaultizeZoom(axisConfig.zoom, id, 'y')
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'y', axisConfig.reverse)
     });
 
     // Increment the offset for the next axis

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -9,6 +9,7 @@ export declare const defaultZoomOptions: {
   maxSpan: number;
   panning: true;
   filterMode: "keep";
+  reverse: false;
   slider: {
     enabled: false;
     preview: false;
@@ -16,4 +17,4 @@ export declare const defaultZoomOptions: {
     showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
   };
 };
-export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;
+export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y", reverse?: boolean) => DefaultizedZoomOptions | undefined;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js

@@ -8,6 +8,7 @@ export const defaultZoomOptions = {
   maxSpan: 100,
   panning: true,
   filterMode: 'keep',
+  reverse: false,
   slider: {
     enabled: false,
     preview: false,
@@ -15,7 +16,7 @@ export const defaultZoomOptions = {
     showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
 };
-export const defaultizeZoom = (zoom, axisId, axisDirection) => {
+export const defaultizeZoom = (zoom, axisId, axisDirection, reverse) => {
   if (!zoom) {
     return undefined;
   }
@@ -23,12 +24,16 @@ export const defaultizeZoom = (zoom, axisId, axisDirection) => {
     return _extends({
       axisId,
       axisDirection
-    }, defaultZoomOptions);
+    }, defaultZoomOptions, {
+      reverse: reverse ?? false
+    });
   }
   return _extends({
     axisId,
     axisDirection
-  }, defaultZoomOptions, zoom, {
+  }, defaultZoomOptions, {
+    reverse: reverse ?? false
+  }, zoom, {
     slider: _extends({}, defaultZoomOptions.slider, {
       size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : DEFAULT_ZOOM_SLIDER_SIZE
     }, zoom.slider)

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -1,4 +1,4 @@
-import { ComputedAxis } from "../../../../models/axis.js";
+import { ComputedAxis, D3Scale } from "../../../../models/axis.js";
 /**
  * For a pointer coordinate, this function returns the dataIndex associated.
  * Returns `-1` if no dataIndex matches.
@@ -8,4 +8,8 @@ export declare function getAxisIndex(axisConfig: ComputedAxis, pointerValue: num
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number | null): number | Date | null;
+export declare function getAxisValue<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>, axisData: readonly any[] | undefined, pointerValue: number, dataIndex: number | null): number | Date | null;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -46,14 +46,11 @@ export function getAxisIndex(axisConfig, pointerValue) {
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export function getAxisValue(axisConfig, pointerValue, dataIndex) {
-  const {
-    scale,
-    data: axisData
-  } = axisConfig;
+export function getAxisValue(scale, axisData, pointerValue, dataIndex) {
   if (!isOrdinalScale(scale)) {
     if (dataIndex === null) {
-      return scale.invert(pointerValue);
+      const invertedValue = scale.invert(pointerValue);
+      return Number.isNaN(invertedValue) ? null : invertedValue;
     }
     return axisData[dataIndex];
   }

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -5,6 +5,7 @@ import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/i
 import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
+import type { UseChartBrushSignature } from "../useChartBrush/index.js";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -67,6 +68,7 @@ export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slid
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   slider: DefaultedZoomSliderOptions;
+  reverse: boolean;
 }
 export interface UseChartCartesianAxisState {
   /**
@@ -94,5 +96,5 @@ export type UseChartCartesianAxisSignature<SeriesType extends ChartSeriesType =
   defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
   state: UseChartCartesianAxisState;
   dependencies: [UseChartSeriesSignature<SeriesType>];
-  optionalDependencies: [UseChartInteractionSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
 }>;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -1,6 +1,8 @@
 import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { ZoomData } from "./zoom.types.js";
 import { AxisId, D3Scale } from "../../../../models/axis.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { Flatbush } from "../../../Flatbush.js";
 export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, ZoomData>;
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
@@ -15,6 +17,7 @@ export declare const selectorChartZoomMap: import("reselect").Selector<import(".
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, Map<AxisId, ZoomData> | undefined, []>;
+export declare const selectorChartAxisZoomData: import("reselect").Selector<any, ZoomData | undefined, [axisId: AxisId]>;
 export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
@@ -222,4 +225,20 @@ export declare const selectorChartRawAxis: import("reselect").Selector<any, ({
 } & import("../../../../hooks/useTicks.js").TickParams & import("../../../index.js").AxisConfigExtension & {
   zoom: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions | undefined;
 }) | undefined, [axisId: AxisId]>;
+export declare const selectorChartDefaultXAxisId: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, AxisId, []>;
+export declare const selectorChartDefaultYAxisId: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, AxisId, []>;
+export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<SeriesId, Flatbush>;
+export declare const selectorChartSeriesFlatbushMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState>, Map<SeriesId, Flatbush>, any[]>;
 export {};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
 import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { createSelector } from "../../utils/selectors.js";
@@ -14,6 +15,7 @@ import { isOrdinalScale } from "../../../scaleGuards.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtrema } from "./getAxisExtrema.js";
 import { calculateFinalDomain, calculateInitialDomainAndTickNumber } from "./domain.js";
+import { Flatbush } from "../../../Flatbush.js";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -29,6 +31,7 @@ const selectorChartZoomState = state => state.zoom;
 
 export const selectorChartZoomIsInteracting = createSelector([selectorChartZoomState], zoom => zoom?.isInteracting);
 export const selectorChartZoomMap = createSelector([selectorChartZoomState], zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+export const selectorChartAxisZoomData = createSelector([selectorChartZoomMap, (_, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));
 export const selectorChartZoomOptionsLookup = createSelector([selectorChartRawXAxis, selectorChartRawYAxis], (xAxis, yAxis) => _extends({}, createZoomLookup('x')(xAxis), createZoomLookup('y')(yAxis)));
 export const selectorChartAxisZoomOptionsLookup = createSelector([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
 export const selectorDefaultXAxisTickNumber = createSelector([selectorChartDrawingArea], function selectorDefaultXAxisTickNumber(drawingArea) {
@@ -125,6 +128,10 @@ export const selectorChartFilteredXDomains = createSelector([selectorChartRawXAx
     filteredDomains[axis.id] = calculateFinalDomain(axis, 'x', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
   });
   return filteredDomains;
+}, {
+  memoizeOptions: {
+    resultEqualityCheck: (a, b) => isDeepEqual(a, b)
+  }
 });
 export const selectorChartFilteredYDomains = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartYDomains], (axes, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, domains) => {
   const filteredDomains = {};
@@ -147,6 +154,10 @@ export const selectorChartFilteredYDomains = createSelector([selectorChartRawYAx
     filteredDomains[axis.id] = calculateFinalDomain(axis, 'y', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
   });
   return filteredDomains;
+}, {
+  memoizeOptions: {
+    resultEqualityCheck: (a, b) => isDeepEqual(a, b)
+  }
 });
 export const selectorChartNormalizedXScales = createSelector([selectorChartRawXAxis, selectorChartFilteredXDomains], function selectorChartNormalizedXScales(axes, filteredDomains) {
   const scales = {};
@@ -227,4 +238,34 @@ export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, selec
     return undefined;
   }
   return axis;
+});
+export const selectorChartDefaultXAxisId = createSelector([selectorChartRawXAxis], xAxes => xAxes[0].id);
+export const selectorChartDefaultYAxisId = createSelector([selectorChartRawYAxis], yAxes => yAxes[0].id);
+const EMPTY_MAP = new Map();
+export const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
+export const selectorChartSeriesFlatbushMap = createSelector([selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId], function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId) {
+  // FIXME: Do we want to support non-scatter series here?
+  const validSeries = allSeries.scatter;
+  const flatbushMap = new Map();
+  if (!validSeries) {
+    return flatbushMap;
+  }
+  validSeries.seriesOrder.forEach(seriesId => {
+    const {
+      data,
+      xAxisId = defaultXAxisId,
+      yAxisId = defaultYAxisId
+    } = validSeries.series[seriesId];
+    const flatbush = new Flatbush(data.length);
+    const originalXScale = xAxesScaleMap[xAxisId];
+    const originalYScale = yAxesScaleMap[yAxisId];
+    for (const datum of data) {
+      // Add the points using a [0, 1] range so that we don't need to recreate the Flatbush structure when zooming.
+      // This doesn't happen in practice, though, because currently the scales depend on the drawing area.
+      flatbush.add(originalXScale(datum.x), originalYScale(datum.y));
+    }
+    flatbush.finish();
+    flatbushMap.set(seriesId, flatbush);
+  });
+  return flatbushMap;
 });

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianHighlight.selectors.d.ts

@@ -3,17 +3,17 @@ export declare const selectorChartsHighlightXAxisIndex: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
 export declare const selectorChartsHighlightYAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
 export declare const selectorChartsHighlightXAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;
@@ -26,7 +26,7 @@ export declare const selectorChartsHighlightYAxisValue: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianHighlight.selectors.js

@@ -4,8 +4,12 @@ import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisR
 import { selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue } from "./useChartCartesianInteraction.selectors.js";
 import { selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js";
 import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.js";
+import { selectorBrushShouldPreventAxisHighlight } from "../useChartBrush/index.js";
 const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
-const selectAxisHighlight = (computedIndex, axis, axisItems) => {
+const selectAxisHighlight = (computedIndex, axis, axisItems, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (axisItems !== undefined) {
     return axisItems.filter(item => axis.axis[item.axisId] !== undefined).map(item => item);
   }
@@ -14,9 +18,12 @@ const selectAxisHighlight = (computedIndex, axis, axisItems) => {
     dataIndex: computedIndex
   }];
 };
-export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate) => {
+export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (controlledAxisItems !== undefined) {
     return controlledAxisItems.map(item => _extends({}, item, {
       value: axis.axis[item.axisId]?.data?.[item.dataIndex]
@@ -51,8 +58,8 @@ const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, contro
   }
   return [];
 };
-export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardXAxisIndex, selectorChartsLastInteraction], selectAxisHighlightWithValue);
-export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardYAxisIndex, selectorChartsLastInteraction], selectAxisHighlightWithValue);
+export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardXAxisIndex, selectorChartsLastInteraction, selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
+export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardYAxisIndex, selectorChartsLastInteraction, selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
 
 /**
  * Get the scale of the axis with highlight if controlled. The default axis otherwise.

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -34,7 +34,10 @@ export const selectorChartAxisInteraction = createSelector([selectorChartsIntera
  */
 
 function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
-  return Array.isArray(ids) ? ids.map((id, axisIndex) => getAxisValue(axes.axis[id], value, indexes[axisIndex])) : getAxisValue(axes.axis[ids], value, indexes);
+  return Array.isArray(ids) ? ids.map((id, axisIndex) => {
+    const axis = axes.axis[id];
+    return getAxisValue(axis.scale, axis.data, value, indexes[axisIndex]);
+  }) : getAxisValue(axes.axis[ids].scale, axes.axis[ids].data, value, indexes);
 }
 export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
   if (x === null || xAxes.axisIds.length === 0) {

package/esm/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.d.ts

@@ -0,0 +1,5 @@
+import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
+import { ScatterValueType } from "../../../../models/seriesType/scatter.js";
+import { Flatbush } from "../../../Flatbush.js";
+import { D3Scale } from "../../../../models/axis.js";
+export declare function findClosestPoints(flatbush: Flatbush, drawingArea: Pick<ChartDrawingArea, 'top' | 'left' | 'width' | 'height'>, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];

package/esm/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.js

@@ -0,0 +1,33 @@
+import { isOrdinalScale } from "../../../scaleGuards.js";
+export function findClosestPoints(flatbush, drawingArea, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+  const originalXScale = xScale.copy();
+  const originalYScale = yScale.copy();
+  originalXScale.range([0, 1]);
+  originalYScale.range([0, 1]);
+  const excludeIfOutsideDrawingArea = function excludeIfOutsideDrawingArea(index) {
+    const x = originalXScale(seriesData[index].x);
+    const y = originalYScale(seriesData[index].y);
+    return x >= xZoomStart && x <= xZoomEnd && y >= yZoomStart && y <= yZoomEnd;
+  };
+
+  // We need to convert the distance from the original range [0, 1] to the current drawing area
+  // so the comparison is done on pixels instead of normalized values.
+  // fx and fy are the factors to convert the distance from [0, 1] to the current drawing area.
+  const fx = xScale.range()[1] - xScale.range()[0];
+  const fy = yScale.range()[1] - yScale.range()[0];
+  const fxSq = fx * fx;
+  const fySq = fy * fy;
+  function sqDistFn(dx, dy) {
+    return fxSq * dx * dx + fySq * dy * dy;
+  }
+  const pointX = originalXScale(invertScale(xScale, svgPointX, dataIndex => seriesData[dataIndex].x));
+  const pointY = originalYScale(invertScale(yScale, svgPointY, dataIndex => seriesData[dataIndex].y));
+  return flatbush.neighbors(pointX, pointY, maxResults, maxRadius != null ? maxRadius * maxRadius : Infinity, excludeIfOutsideDrawingArea, sqDistFn);
+}
+function invertScale(scale, value, getDataPoint) {
+  if (isOrdinalScale(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return getDataPoint(dataIndex);
+  }
+  return scale.invert(value);
+}

package/esm/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -4,13 +4,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
-import { getValueToPositionMapper } from "../../../../hooks/useScale.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
 import { useSelector } from "../../../store/useSelector.js";
-import { selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.js";
+import { selectorChartAxisZoomData, selectorChartSeriesEmptyFlatbushMap, selectorChartSeriesFlatbushMap, selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
+import { findClosestPoints } from "./findClosestPoints.js";
 export const useChartClosestPoint = ({
   svgRef,
   params,
@@ -36,9 +35,7 @@ export const useChartClosestPoint = ({
     series,
     seriesOrder
   } = useSelector(store, selectorChartSeriesProcessed)?.scatter ?? {};
-  const voronoiRef = React.useRef({});
-  const delauneyRef = React.useRef(undefined);
-  const lastFind = React.useRef(undefined);
+  const flatbushMap = useSelector(store, zoomIsInteracting ? selectorChartSeriesEmptyFlatbushMap : selectorChartSeriesFlatbushMap);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
@@ -48,52 +45,6 @@ export const useChartClosestPoint = ({
       }
     }));
   }, [store, disableVoronoi]);
-  useEnhancedEffect(() => {
-    // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
-
-    if (zoomIsInteracting || seriesOrder === undefined || series === undefined || disableVoronoi) {
-      // If there is no scatter chart series
-      return;
-    }
-    voronoiRef.current = {};
-    let points = [];
-    seriesOrder.forEach(seriesId => {
-      const {
-        data,
-        xAxisId,
-        yAxisId
-      } = series[seriesId];
-      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
-      const getXPosition = getValueToPositionMapper(xScale);
-      const getYPosition = getValueToPositionMapper(yScale);
-      const seriesPoints = [];
-      const seriesIndexes = [];
-      for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
-        const {
-          x,
-          y
-        } = data[dataIndex];
-        const pointX = getXPosition(x);
-        const pointY = getYPosition(y);
-        if (instance.isPointInside(pointX, pointY)) {
-          seriesPoints.push(pointX);
-          seriesPoints.push(pointY);
-          seriesIndexes.push(dataIndex);
-        }
-      }
-      voronoiRef.current[seriesId] = {
-        seriesId,
-        seriesIndexes,
-        startIndex: points.length,
-        endIndex: points.length + seriesPoints.length,
-        markerSize: series[seriesId].markerSize
-      };
-      points = points.concat(seriesPoints);
-    });
-    delauneyRef.current = new Delaunay(points);
-    lastFind.current = undefined;
-  }, [zoomIsInteracting, defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance, disableVoronoi]);
   React.useEffect(() => {
     if (svgRef.current === null || disableVoronoi) {
       return undefined;
@@ -103,40 +54,48 @@ export const useChartClosestPoint = ({
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
-        lastFind.current = undefined;
         return 'outside-chart';
       }
-      if (!delauneyRef.current) {
-        return 'no-point-found';
-      }
-      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
-      if (closestPointIndex === undefined) {
-        return 'no-point-found';
+      let closestPoint = undefined;
+      for (const seriesId of seriesOrder ?? []) {
+        const aSeries = (series ?? {})[seriesId];
+        const flatbush = flatbushMap.get(seriesId);
+        if (!flatbush) {
+          continue;
+        }
+        const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+        const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+        const xAxisZoom = selectorChartAxisZoomData(store.getSnapshot(), xAxisId);
+        const yAxisZoom = selectorChartAxisZoomData(store.getSnapshot(), yAxisId);
+        const maxRadius = voronoiMaxRadius === 'item' ? aSeries.markerSize : voronoiMaxRadius;
+        const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
+        const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
+        const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
+        const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
+        const xScale = xAxis[xAxisId].scale;
+        const yScale = yAxis[yAxisId].scale;
+        const closestPointIndex = findClosestPoints(flatbush, drawingArea, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        if (closestPointIndex === undefined) {
+          continue;
+        }
+        const point = aSeries.data[closestPointIndex];
+        const scaledX = xScale(point.x);
+        const scaledY = yScale(point.y);
+        const distSq = (scaledX - svgPoint.x) ** 2 + (scaledY - svgPoint.y) ** 2;
+        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
+          closestPoint = {
+            dataIndex: closestPointIndex,
+            seriesId,
+            distanceSq: distSq
+          };
+        }
       }
-      lastFind.current = closestPointIndex;
-      const closestSeries = Object.values(voronoiRef.current).find(value => {
-        return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
-      });
-      if (closestSeries === undefined) {
+      if (closestPoint === undefined) {
         return 'no-point-found';
       }
-
-      // The point index in the series with id=closestSeries.seriesId.
-      const seriesPointIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
-      const dataIndex = voronoiRef.current[closestSeries.seriesId].seriesIndexes[seriesPointIndex];
-      const maxRadius = voronoiMaxRadius === 'item' ? closestSeries.markerSize : voronoiMaxRadius;
-      if (maxRadius !== undefined) {
-        const pointX = delauneyRef.current.points[2 * closestPointIndex];
-        const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];
-        const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
-        if (dist2 > maxRadius ** 2) {
-          // The closest point is too far to be considered.
-          return 'outside-voronoi-max-radius';
-        }
-      }
       return {
-        seriesId: closestSeries.seriesId,
-        dataIndex
+        seriesId: closestPoint.seriesId,
+        dataIndex: closestPoint.dataIndex
       };
     }
 
@@ -211,7 +170,7 @@ export const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = useEventCallback(() => {