@mui/x-charts 9.4.0 → 9.6.0

package/internals/plugins/allPlugins.d.mts

@@ -9,6 +9,7 @@ import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/inde
 import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.mjs";
 import { type UseChartVisibilityManagerSignature } from "./featurePlugins/useChartVisibilityManager/index.mjs";
 import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.mjs";
-export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.mjs").ChartPlugin<UseChartZAxisSignature>, import("./models/index.mjs").ChartPlugin<UseChartBrushSignature>, import("./models/index.mjs").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartInteractionSignature>, import("./models/index.mjs").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.mjs").ChartPlugin<UseChartKeyboardNavigationSignature>];
+import { type UseProgressiveRenderingSignature } from "./featurePlugins/useProgressiveRendering/index.mjs";
+export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.mjs").ChartPlugin<UseChartZAxisSignature>, import("./models/index.mjs").ChartPlugin<UseChartBrushSignature>, import("./models/index.mjs").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartInteractionSignature>, import("./models/index.mjs").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.mjs").ChartPlugin<UseChartKeyboardNavigationSignature>, import("./models/index.mjs").ChartPlugin<UseProgressiveRenderingSignature>];

package/internals/plugins/allPlugins.d.ts

@@ -9,6 +9,7 @@ import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/inde
 import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
 import { type UseChartVisibilityManagerSignature } from "./featurePlugins/useChartVisibilityManager/index.js";
 import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.js";
-export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];
+import { type UseProgressiveRenderingSignature } from "./featurePlugins/useProgressiveRendering/index.js";
+export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>, import("./models/index.js").ChartPlugin<UseProgressiveRenderingSignature>];

package/internals/plugins/allPlugins.js

@@ -13,6 +13,7 @@ var _useChartZAxis = require("./featurePlugins/useChartZAxis");
 var _useChartBrush = require("./featurePlugins/useChartBrush");
 var _useChartVisibilityManager = require("./featurePlugins/useChartVisibilityManager");
 var _useChartTooltip = require("./featurePlugins/useChartTooltip");
+var _useProgressiveRendering = require("./featurePlugins/useProgressiveRendering");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation, _useProgressiveRendering.useProgressiveRendering];

package/internals/plugins/allPlugins.mjs

@@ -9,4 +9,5 @@ import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.mjs";
 import { useChartBrush } from "./featurePlugins/useChartBrush/index.mjs";
 import { useChartVisibilityManager } from "./featurePlugins/useChartVisibilityManager/index.mjs";
 import { useChartTooltip } from "./featurePlugins/useChartTooltip/index.mjs";
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation];
+import { useProgressiveRendering } from "./featurePlugins/useProgressiveRendering/index.mjs";
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation, useProgressiveRendering];

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.mts

@@ -1,4 +1,13 @@
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
-import { type ChartRootSelector } from "../../utils/selectors.mjs";
-import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;
+import { type ChartState } from "../../models/chart.mjs";
+import type { ChartExperimentalFeatures, UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+export declare const selectorChartExperimentalFeaturesState: <K extends keyof ChartExperimentalFeatures>(state: ChartState<[UseChartExperimentalFeaturesSignature<ChartSeriesType>]>, featureName: K) => ChartExperimentalFeatures[K] | undefined;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -1,4 +1,13 @@
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type ChartRootSelector } from "../../utils/selectors.js";
-import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;
+import { type ChartState } from "../../models/chart.js";
+import type { ChartExperimentalFeatures, UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+export declare const selectorChartExperimentalFeaturesState: <K extends keyof ChartExperimentalFeatures>(state: ChartState<[UseChartExperimentalFeaturesSignature<ChartSeriesType>]>, featureName: K) => ChartExperimentalFeatures[K] | undefined;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.js

@@ -4,5 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartExperimentalFeaturesState = void 0;
-const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+const selectorChartExperimentalFeaturesState = (state, featureName) => state.experimentalFeatures?.[featureName];
 exports.selectorChartExperimentalFeaturesState = selectorChartExperimentalFeaturesState;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.mjs

@@ -1 +1,10 @@
-export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+export const selectorChartExperimentalFeaturesState = (state, featureName) => state.experimentalFeatures?.[featureName];

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.mts

@@ -13,7 +13,21 @@ interface LineExperimentalFeatures {
    */
   enablePositionBasedPointerInteraction?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = 'line' extends SeriesType ? LineExperimentalFeatures : {};
+interface ScatterExperimentalFeatures {
+  /**
+   * Enables automatic progressive (batched) rendering for scatter series.
+   *
+   * When enabled and the `renderer` prop is left unset, the chart switches to
+   * the `svg-progressive` renderer above an internal point-count threshold,
+   * painting points over several animation frames to keep the main thread
+   * responsive. When disabled, the unset `renderer` keeps the synchronous
+   * `svg-single` renderer. Setting `renderer` explicitly is unaffected.
+   *
+   * This behavior will become the default in the next major version.
+   */
+  progressiveRendering?: boolean;
+}
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -13,7 +13,21 @@ interface LineExperimentalFeatures {
    */
   enablePositionBasedPointerInteraction?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = 'line' extends SeriesType ? LineExperimentalFeatures : {};
+interface ScatterExperimentalFeatures {
+  /**
+   * Enables automatic progressive (batched) rendering for scatter series.
+   *
+   * When enabled and the `renderer` prop is left unset, the chart switches to
+   * the `svg-progressive` renderer above an internal point-count threshold,
+   * painting points over several animation frames to keep the main thread
+   * responsive. When disabled, the unset `renderer` keeps the synchronous
+   * `svg-single` renderer. Setting `renderer` explicitly is unaffected.
+   *
+   * This behavior will become the default in the next major version.
+   */
+  progressiveRendering?: boolean;
+}
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -40,34 +40,6 @@ const useChartInteractionListener = ({
           name: 'brush',
           threshold: 0,
           maxPointers: 1
-        }),
-        // Zoom gestures
-        new _core.PanGesture({
-          name: 'zoomPan',
-          threshold: 0,
-          preventIf: ['zoomTapAndDrag', 'zoomPressAndDrag']
-        }), new _core.PinchGesture({
-          name: 'zoomPinch',
-          threshold: 5
-        }), new _core.TurnWheelGesture({
-          name: 'zoomTurnWheel',
-          sensitivity: 0.01,
-          initialDelta: 1,
-          passive: false
-        }), new _core.TurnWheelGesture({
-          name: 'panTurnWheel',
-          sensitivity: 0.5,
-          passive: false
-        }), new _core.TapAndDragGesture({
-          name: 'zoomTapAndDrag',
-          dragThreshold: 10
-        }), new _core.PressAndDragGesture({
-          name: 'zoomPressAndDrag',
-          dragThreshold: 10,
-          preventIf: ['zoomPinch']
-        }), new _core.TapGesture({
-          name: 'zoomDoubleTapReset',
-          taps: 2
         })]
       });
     }
@@ -77,7 +49,7 @@ const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'panTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
+    gestureManager.registerElement(['pan', 'move', 'tap', 'quickPress', 'brush'], svg);
     return () => {
       // Cleanup gesture manager
       gestureManager.unregisterAllGestures(svg);
@@ -113,10 +85,24 @@ const useChartInteractionListener = ({
       svg?.removeEventListener('gestureend', preventDefault);
     };
   }, [chartsLayerContainerRef]);
+  const registerGestures = React.useCallback(gestures => {
+    const svg = chartsLayerContainerRef.current;
+    const gestureManager = gestureManagerRef.current;
+    if (!gestureManager || !svg) {
+      return () => {};
+    }
+    const gestureNames = gestures.map(gesture => gesture.name);
+    gestureManager.addGestures(gestures);
+    gestureManager.registerElement(gestureNames, svg);
+    return () => {
+      gestureManager.removeGestures(gestureNames);
+    };
+  }, [chartsLayerContainerRef, gestureManagerRef]);
   return {
     instance: {
       addInteractionListener,
-      updateZoomInteractionListeners
+      updateZoomInteractionListeners,
+      registerGestures
     }
   };
 };

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressAndDragGesture, PressGesture, TapAndDragGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
+import { GestureManager, MoveGesture, PanGesture, PressGesture, TapGesture } from '@mui/x-internal-gestures/core';
 const preventDefault = event => event.preventDefault();
 export const useChartInteractionListener = ({
   instance
@@ -34,34 +34,6 @@ export const useChartInteractionListener = ({
           name: 'brush',
           threshold: 0,
           maxPointers: 1
-        }),
-        // Zoom gestures
-        new PanGesture({
-          name: 'zoomPan',
-          threshold: 0,
-          preventIf: ['zoomTapAndDrag', 'zoomPressAndDrag']
-        }), new PinchGesture({
-          name: 'zoomPinch',
-          threshold: 5
-        }), new TurnWheelGesture({
-          name: 'zoomTurnWheel',
-          sensitivity: 0.01,
-          initialDelta: 1,
-          passive: false
-        }), new TurnWheelGesture({
-          name: 'panTurnWheel',
-          sensitivity: 0.5,
-          passive: false
-        }), new TapAndDragGesture({
-          name: 'zoomTapAndDrag',
-          dragThreshold: 10
-        }), new PressAndDragGesture({
-          name: 'zoomPressAndDrag',
-          dragThreshold: 10,
-          preventIf: ['zoomPinch']
-        }), new TapGesture({
-          name: 'zoomDoubleTapReset',
-          taps: 2
         })]
       });
     }
@@ -71,7 +43,7 @@ export const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'panTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
+    gestureManager.registerElement(['pan', 'move', 'tap', 'quickPress', 'brush'], svg);
     return () => {
       // Cleanup gesture manager
       gestureManager.unregisterAllGestures(svg);
@@ -107,10 +79,24 @@ export const useChartInteractionListener = ({
       svg?.removeEventListener('gestureend', preventDefault);
     };
   }, [chartsLayerContainerRef]);
+  const registerGestures = React.useCallback(gestures => {
+    const svg = chartsLayerContainerRef.current;
+    const gestureManager = gestureManagerRef.current;
+    if (!gestureManager || !svg) {
+      return () => {};
+    }
+    const gestureNames = gestures.map(gesture => gesture.name);
+    gestureManager.addGestures(gestures);
+    gestureManager.registerElement(gestureNames, svg);
+    return () => {
+      gestureManager.removeGestures(gestureNames);
+    };
+  }, [chartsLayerContainerRef, gestureManagerRef]);
   return {
     instance: {
       addInteractionListener,
-      updateZoomInteractionListeners
+      updateZoomInteractionListeners,
+      registerGestures
     }
   };
 };

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.mts

@@ -1,4 +1,4 @@
-import { type MoveEvent, type PanEvent, type PanGestureOptions, type PinchEvent, type PinchGestureOptions, type PressEvent, type TapEvent, type TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
+import { type Gesture, type MoveEvent, type PanEvent, type PanGestureOptions, type PinchEvent, type PinchGestureOptions, type PressEvent, type TapEvent, type TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { type ChartPluginSignature } from "../../models/index.mjs";
 export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'panTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
@@ -27,6 +27,7 @@ export type UpdateZoomInteractionListeners = {
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}
+export type RegisterGestures = (gestures: Gesture<string>[]) => () => void;
 export interface UseChartInteractionListenerInstance {
   /**
    * Adds an interaction listener to the SVG element.
@@ -42,6 +43,12 @@ export interface UseChartInteractionListenerInstance {
    * @param options The options to apply to the interaction.
    */
   updateZoomInteractionListeners: UpdateZoomInteractionListeners;
+  /**
+   * Registers additional gestures on the chart interaction element.
+   *
+   * @param gestures The gestures to register.
+   */
+  registerGestures: RegisterGestures;
 }
 export type UseChartInteractionListenerSignature = ChartPluginSignature<{
   params: UseChartInteractionListenerParameters;

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -1,4 +1,4 @@
-import { type MoveEvent, type PanEvent, type PanGestureOptions, type PinchEvent, type PinchGestureOptions, type PressEvent, type TapEvent, type TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
+import { type Gesture, type MoveEvent, type PanEvent, type PanGestureOptions, type PinchEvent, type PinchGestureOptions, type PressEvent, type TapEvent, type TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { type ChartPluginSignature } from "../../models/index.js";
 export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'panTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
@@ -27,6 +27,7 @@ export type UpdateZoomInteractionListeners = {
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}
+export type RegisterGestures = (gestures: Gesture<string>[]) => () => void;
 export interface UseChartInteractionListenerInstance {
   /**
    * Adds an interaction listener to the SVG element.
@@ -42,6 +43,12 @@ export interface UseChartInteractionListenerInstance {
    * @param options The options to apply to the interaction.
    */
   updateZoomInteractionListeners: UpdateZoomInteractionListeners;
+  /**
+   * Registers additional gestures on the chart interaction element.
+   *
+   * @param gestures The gestures to register.
+   */
+  registerGestures: RegisterGestures;
 }
 export type UseChartInteractionListenerSignature = ChartPluginSignature<{
   params: UseChartInteractionListenerParameters;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/colorProcessor.types.d.mts

@@ -6,7 +6,7 @@ import type { ChartSeriesType } from "../../../../../models/seriesType/config.mj
  * Map data index to a color.
  * If dataIndex is not defined, it falls back to the series color when defined.
  */
-export type ColorGetter<SeriesType extends ChartSeriesType> = SeriesType extends 'pie' | 'funnel' ? (dataIndex: number) => string : SeriesType extends 'heatmap' ? (value: number | null) => string : (dataIndex?: number) => string;
+export type ColorGetter<SeriesType extends ChartSeriesType> = SeriesType extends 'pie' | 'funnel' ? (dataIndex: number) => string : SeriesType extends 'heatmap' ? (value: number | null) => string : SeriesType extends 'mapShape' ? (dataIndex?: number) => string | null : (dataIndex?: number) => string;
 export type ColorProcessor<SeriesType extends ChartSeriesType> = (series: DefaultizedSeriesType<SeriesType>,
 /**
  * Either the x-axis or rotation-axis, depending on the coordinate system.

package/internals/plugins/corePlugins/useChartSeriesConfig/types/colorProcessor.types.d.ts

@@ -6,7 +6,7 @@ import type { ChartSeriesType } from "../../../../../models/seriesType/config.js
  * Map data index to a color.
  * If dataIndex is not defined, it falls back to the series color when defined.
  */
-export type ColorGetter<SeriesType extends ChartSeriesType> = SeriesType extends 'pie' | 'funnel' ? (dataIndex: number) => string : SeriesType extends 'heatmap' ? (value: number | null) => string : (dataIndex?: number) => string;
+export type ColorGetter<SeriesType extends ChartSeriesType> = SeriesType extends 'pie' | 'funnel' ? (dataIndex: number) => string : SeriesType extends 'heatmap' ? (value: number | null) => string : SeriesType extends 'mapShape' ? (dataIndex?: number) => string | null : (dataIndex?: number) => string;
 export type ColorProcessor<SeriesType extends ChartSeriesType> = (series: DefaultizedSeriesType<SeriesType>,
 /**
  * Either the x-axis or rotation-axis, depending on the coordinate system.

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipItemPositionGetter.types.d.mts

@@ -1,14 +1,21 @@
+import type { ExtendedFeatureCollection, GeoProjection } from '@mui/x-charts-vendor/d3-geo';
 import type { SeriesItemIdentifierWithType } from "../../../../../models/seriesType/index.mjs";
 import type { ChartSeriesType } from "../../../../../models/seriesType/config.mjs";
 import { type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type ComputedXAxis, type ComputedYAxis } from "../../../../../models/axis.mjs";
 import { type ChartDrawingArea } from "../../../../../hooks/useDrawingArea.mjs";
 import { type ProcessedSeries, type SeriesLayout } from "../../useChartSeries/index.mjs";
 import { type ComputeResult } from "../../../featurePlugins/useChartPolarAxis/computeAxisValue.mjs";
+export type GeoTooltipPosition = {
+  geoData: ExtendedFeatureCollection | null;
+  projection: GeoProjection | null;
+  featureIndexesByName: ReadonlyMap<string, number[]>;
+};
 export interface TooltipPositionGetterAxesConfig {
   x?: ComputedXAxis;
   y?: ComputedYAxis;
   rotationAxes?: ComputeResult<ChartsRotationAxisProps>;
   radiusAxes?: ComputeResult<ChartsRadiusAxisProps>;
+  geo?: GeoTooltipPosition;
 }
 export type TooltipItemPositionGetter<SeriesType extends ChartSeriesType> = (params: {
   series: ProcessedSeries<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipItemPositionGetter.types.d.ts

@@ -1,14 +1,21 @@
+import type { ExtendedFeatureCollection, GeoProjection } from '@mui/x-charts-vendor/d3-geo';
 import type { SeriesItemIdentifierWithType } from "../../../../../models/seriesType/index.js";
 import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
 import { type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type ComputedXAxis, type ComputedYAxis } from "../../../../../models/axis.js";
 import { type ChartDrawingArea } from "../../../../../hooks/useDrawingArea.js";
 import { type ProcessedSeries, type SeriesLayout } from "../../useChartSeries/index.js";
 import { type ComputeResult } from "../../../featurePlugins/useChartPolarAxis/computeAxisValue.js";
+export type GeoTooltipPosition = {
+  geoData: ExtendedFeatureCollection | null;
+  projection: GeoProjection | null;
+  featureIndexesByName: ReadonlyMap<string, number[]>;
+};
 export interface TooltipPositionGetterAxesConfig {
   x?: ComputedXAxis;
   y?: ComputedYAxis;
   rotationAxes?: ComputeResult<ChartsRotationAxisProps>;
   radiusAxes?: ComputeResult<ChartsRadiusAxisProps>;
+  geo?: GeoTooltipPosition;
 }
 export type TooltipItemPositionGetter<SeriesType extends ChartSeriesType> = (params: {
   series: ProcessedSeries<SeriesType>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.d.mts

@@ -2,14 +2,6 @@ import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { type AxisId, type ContinuousScaleName, type DefaultedAxis, type DefaultedXAxis, type DefaultedYAxis } from "../../../../models/axis.mjs";
 import { type ProcessedSeries } from "../../corePlugins/useChartSeries/index.mjs";
 import { type TickParams } from "../../../../hooks/useTicks.mjs";
-/**
- * Calculates the initial domain and tick number for a given axis.
- * The domain should still run through the zoom filterMode after this step.
- */
-export declare function calculateInitialDomainAndTickNumber(axis: DefaultedAxis<ContinuousScaleName>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, [minData, maxData]: [number | Date, number | Date], defaultTickNumber: number): {
-  domain: [NumberValue, NumberValue];
-  tickNumber: number;
-};
 /**
  * Calculates the final domain for an axis.
  * After this step, the domain can be used to create the axis scale.

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.d.ts

@@ -2,14 +2,6 @@ import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { type AxisId, type ContinuousScaleName, type DefaultedAxis, type DefaultedXAxis, type DefaultedYAxis } from "../../../../models/axis.js";
 import { type ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
 import { type TickParams } from "../../../../hooks/useTicks.js";
-/**
- * Calculates the initial domain and tick number for a given axis.
- * The domain should still run through the zoom filterMode after this step.
- */
-export declare function calculateInitialDomainAndTickNumber(axis: DefaultedAxis<ContinuousScaleName>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, [minData, maxData]: [number | Date, number | Date], defaultTickNumber: number): {
-  domain: [NumberValue, NumberValue];
-  tickNumber: number;
-};
 /**
  * Calculates the final domain for an axis.
  * After this step, the domain can be used to create the axis scale.

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculateFinalDomain = calculateFinalDomain;
-exports.calculateInitialDomainAndTickNumber = calculateInitialDomainAndTickNumber;
 exports.computeAxisDomainsMap = computeAxisDomainsMap;
 var _axis = require("../../../../models/axis");
 var _getScale = require("../../../getScale");
@@ -73,7 +72,7 @@ function getActualAxisExtrema(axisExtrema, minData, maxData) {
   if ('max' in axisExtrema && axisExtrema.max != null && axisExtrema.max < minData) {
     min = axisExtrema.max;
   }
-  if ('min' in axisExtrema && axisExtrema.min != null && axisExtrema.min > minData) {
+  if ('min' in axisExtrema && axisExtrema.min != null && axisExtrema.min > maxData) {
     max = axisExtrema.min;
   }
   if (!('min' in axisExtrema) && !('max' in axisExtrema)) {

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.mjs

@@ -10,7 +10,7 @@ function niceDomain(scaleType, domain, tickNumber) {
  * Calculates the initial domain and tick number for a given axis.
  * The domain should still run through the zoom filterMode after this step.
  */
-export function calculateInitialDomainAndTickNumber(axis, axisDirection, axisIndex, formattedSeries, [minData, maxData], defaultTickNumber) {
+function calculateInitialDomainAndTickNumber(axis, axisDirection, axisIndex, formattedSeries, [minData, maxData], defaultTickNumber) {
   const domainLimit = getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries);
   let axisExtrema = getActualAxisExtrema(axis, minData, maxData);
   if (typeof domainLimit === 'function') {
@@ -65,7 +65,7 @@ function getActualAxisExtrema(axisExtrema, minData, maxData) {
   if ('max' in axisExtrema && axisExtrema.max != null && axisExtrema.max < minData) {
     min = axisExtrema.max;
   }
-  if ('min' in axisExtrema && axisExtrema.min != null && axisExtrema.min > minData) {
+  if ('min' in axisExtrema && axisExtrema.min != null && axisExtrema.min > maxData) {
     max = axisExtrema.min;
   }
   if (!('min' in axisExtrema) && !('max' in axisExtrema)) {

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.js

@@ -13,14 +13,39 @@ function getRange(drawingArea, axisDirection, axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
+
+/**
+ * Caches the normalized ordinal scale so it is not rebuilt on every pan/zoom frame. Building a
+ * band/point scale is `O(domain)` — it interns the whole domain — which is prohibitive for large
+ * category axes when zooming. The domain array (the axis `data`) is referentially stable across
+ * zoom, so it is the outer key; a `WeakMap` lets unused domains be collected. The inner key is the
+ * scale variant (type + padding), because the same domain array can back several axes (e.g. a `band`
+ * and a `point` axis sharing one `data` array), which must not share a scale. Continuous scales are
+ * not cached: they are cheap to build and their domain reference changes with zoom anyway, so a
+ * cache would only ever miss.
+ */
+const normalizedScaleCache = new WeakMap();
+function getCachedOrdinalScale(domain, variant, build) {
+  let variants = normalizedScaleCache.get(domain);
+  if (!variants) {
+    variants = new Map();
+    normalizedScaleCache.set(domain, variants);
+  }
+  let scale = variants.get(variant);
+  if (!scale) {
+    scale = build();
+    variants.set(variant, scale);
+  }
+  return scale;
+}
 function getNormalizedAxisScale(axis, domain) {
   const range = [0, 1];
   if ((0, _axis.isBandScaleConfig)(axis)) {
     const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-    return (0, _scales.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
+    return getCachedOrdinalScale(domain, `band:${categoryGapRatio}`, () => (0, _scales.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2));
   }
   if ((0, _axis.isPointScaleConfig)(axis)) {
-    return (0, _scales.scalePoint)(domain, range);
+    return getCachedOrdinalScale(domain, 'point', () => (0, _scales.scalePoint)(domain, range));
   }
   const scaleType = axis.scaleType ?? 'linear';
   const scale = (0, _getScale.getScale)(scaleType, domain, range);

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.mjs

@@ -6,14 +6,39 @@ export function getRange(drawingArea, axisDirection, axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
+
+/**
+ * Caches the normalized ordinal scale so it is not rebuilt on every pan/zoom frame. Building a
+ * band/point scale is `O(domain)` — it interns the whole domain — which is prohibitive for large
+ * category axes when zooming. The domain array (the axis `data`) is referentially stable across
+ * zoom, so it is the outer key; a `WeakMap` lets unused domains be collected. The inner key is the
+ * scale variant (type + padding), because the same domain array can back several axes (e.g. a `band`
+ * and a `point` axis sharing one `data` array), which must not share a scale. Continuous scales are
+ * not cached: they are cheap to build and their domain reference changes with zoom anyway, so a
+ * cache would only ever miss.
+ */
+const normalizedScaleCache = new WeakMap();
+function getCachedOrdinalScale(domain, variant, build) {
+  let variants = normalizedScaleCache.get(domain);
+  if (!variants) {
+    variants = new Map();
+    normalizedScaleCache.set(domain, variants);
+  }
+  let scale = variants.get(variant);
+  if (!scale) {
+    scale = build();
+    variants.set(variant, scale);
+  }
+  return scale;
+}
 export function getNormalizedAxisScale(axis, domain) {
   const range = [0, 1];
   if (isBandScaleConfig(axis)) {
     const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-    return scaleBand(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
+    return getCachedOrdinalScale(domain, `band:${categoryGapRatio}`, () => scaleBand(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2));
   }
   if (isPointScaleConfig(axis)) {
-    return scalePoint(domain, range);
+    return getCachedOrdinalScale(domain, 'point', () => scalePoint(domain, range));
   }
   const scaleType = axis.scaleType ?? 'linear';
   const scale = getScale(scaleType, domain, range);

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

@@ -14,7 +14,6 @@ var _store = require("@mui/x-internals/store");
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("../../../../colorPalettes");
-var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
@@ -47,7 +46,6 @@ const useChartCartesianAxis = ({
       (0, _warning.warnOnce)([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
   const processedSeries = store.use(_useChartSeries.selectorChartSeriesProcessed);
   const isInteractionEnabled = store.use(_useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
@@ -96,7 +94,7 @@ const useChartCartesianAxis = ({
       x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset, axesGap),
       y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap)
     });
-  }, [drawingArea, xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   (0, _store.useStoreEffect)(store, _useChartCartesianInteraction.selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {