@mui/x-charts 8.12.0 → 8.13.0

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

@@ -5,137 +5,91 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getNextSeriesWithData, getPreviousSeriesWithData, seriesHasData } from "./useChartKeyboardNavigation.helpers.js";
+function getNextIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
+    const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+    if (nextSeries === null) {
+      return null;
+    }
+    type = nextSeries.type;
+    seriesId = nextSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
+  };
+}
+function getPreviousIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
+    const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+    if (previousSeries === null) {
+      return null;
+    }
+    type = previousSeries.type;
+    seriesId = previousSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
+  };
+}
+function getNextSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+  if (nextSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = nextSeries.type;
+  seriesId = nextSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
+function getPreviousSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+  if (previousSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = previousSeries.type;
+  seriesId = previousSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
 export const useChartKeyboardNavigation = ({
   params,
   store,
   svgRef
 }) => {
-  const focusNextItem = useEventCallback(function focusNextItem() {
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      if (type === undefined ||
-      // @ts-ignore sankey is not in MIT version
-      type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
-        const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
-        if (nextSeries === null) {
-          return _extends({}, state, {
-            keyboardNavigation: _extends({}, state.keyboardNavigation, {
-              item: null // No series to move the focus too.
-            })
-          });
-        }
-        type = nextSeries.type;
-        seriesId = nextSeries.seriesId;
-      }
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      return _extends({}, state, {
-        keyboardNavigation: _extends({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
-          }
-        })
-      });
-    });
-  });
-  const focusPreviousItem = useEventCallback(function focusPreviousItem() {
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      if (type === undefined ||
-      // @ts-ignore sankey is not in MIT version
-      type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
-        const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
-        if (previousSeries === null) {
-          return _extends({}, state, {
-            keyboardNavigation: _extends({}, state.keyboardNavigation, {
-              item: null // No series to move the focus too.} };
-            })
-          });
-        }
-        type = previousSeries.type;
-        seriesId = previousSeries.seriesId;
-      }
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      return _extends({}, state, {
-        keyboardNavigation: _extends({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
-          }
-        })
-      });
-    });
-  });
-  const focusPreviousSeries = useEventCallback(function focusPreviousSeries() {
-    let setNewSeries = false;
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
-      if (previousSeries === null) {
-        return _extends({}, state, {
-          keyboardNavigation: _extends({}, state.keyboardNavigation, {
-            item: null // No series to move the focus too.
-          })
-        });
-      }
-      type = previousSeries.type;
-      seriesId = previousSeries.seriesId;
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      setNewSeries = true;
-      return _extends({}, state, {
-        keyboardNavigation: _extends({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
-          }
-        })
-      });
-    });
-    return setNewSeries;
-  });
-  const focusNextSeries = useEventCallback(function focusNextSeries() {
-    let setNewSeries = false;
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
-      if (nextSeries === null) {
-        return _extends({}, state, {
-          keyboardNavigation: _extends({}, state.keyboardNavigation, {
-            item: null // No series to move the focus too.
-          })
-        });
-      }
-      type = nextSeries.type;
-      seriesId = nextSeries.seriesId;
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      setNewSeries = true;
-      return _extends({}, state, {
-        keyboardNavigation: _extends({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
-          }
-        })
-      });
-    });
-    return setNewSeries;
-  });
   const removeFocus = useEventCallback(function removeFocus() {
     store.update(state => {
       if (state.keyboardNavigation.item === null) {
@@ -154,34 +108,42 @@ export const useChartKeyboardNavigation = ({
       return undefined;
     }
     function keyboardHandler(event) {
-      switch (event.key) {
-        case 'ArrowRight':
-          focusNextItem();
-          break;
-        case 'ArrowLeft':
-          focusPreviousItem();
-          break;
-        case 'ArrowDown':
-          {
-            const updatedStore = focusPreviousSeries();
-            if (updatedStore) {
-              // prevents scrolling
-              event.preventDefault();
-            }
+      store.update(prevState => {
+        let newFocusedItem = prevState.keyboardNavigation.item;
+        switch (event.key) {
+          case 'ArrowRight':
+            newFocusedItem = getNextIndexFocusedItem(prevState);
+            break;
+          case 'ArrowLeft':
+            newFocusedItem = getPreviousIndexFocusedItem(prevState);
             break;
-          }
-        case 'ArrowUp':
-          {
-            const updatedStore = focusNextSeries();
-            if (updatedStore) {
-              // prevents scrolling
-              event.preventDefault();
+          case 'ArrowDown':
+            {
+              newFocusedItem = getPreviousSeriesFocusedItem(prevState);
+              break;
             }
+          case 'ArrowUp':
+            {
+              newFocusedItem = getNextSeriesFocusedItem(prevState);
+              break;
+            }
+          default:
             break;
-          }
-        default:
-          break;
-      }
+        }
+        if (newFocusedItem !== prevState.keyboardNavigation.item) {
+          event.preventDefault();
+          return _extends({}, prevState, prevState.interaction && {
+            interaction: _extends({}, prevState.interaction, {
+              lastUpdate: 'keyboard'
+            })
+          }, {
+            keyboardNavigation: _extends({}, prevState.keyboardNavigation, {
+              item: newFocusedItem
+            })
+          });
+        }
+        return prevState;
+      });
     }
     element.addEventListener('keydown', keyboardHandler);
     element.addEventListener('blur', removeFocus);
@@ -189,15 +151,13 @@ export const useChartKeyboardNavigation = ({
       element.removeEventListener('keydown', keyboardHandler);
       element.removeEventListener('blur', removeFocus);
     };
-  }, [svgRef, focusNextItem, focusPreviousItem, removeFocus, focusPreviousSeries, focusNextSeries, params.enableKeyboardNavigation]);
+  }, [svgRef, removeFocus, params.enableKeyboardNavigation, store]);
   useEnhancedEffect(() => store.update(prev => prev.keyboardNavigation.enableKeyboardNavigation === params.enableKeyboardNavigation ? prev : _extends({}, prev, {
     keyboardNavigation: _extends({}, prev.keyboardNavigation, {
       enableKeyboardNavigation: !!params.enableKeyboardNavigation
     })
   })), [store, params.enableKeyboardNavigation]);
-  return {
-    instance: {}
-  };
+  return {};
 };
 useChartKeyboardNavigation.getInitialState = params => ({
   keyboardNavigation: {

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -1,3 +1,5 @@
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisItemIdentifier } from "../../../../models/axis.js";
 export declare const selectorChartsHasFocusedItem: 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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
@@ -12,7 +14,7 @@ export declare const selectorChartsFocusedSeriesId: import("reselect").Selector<
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, import("../../../index.js").SeriesId | undefined, any[]>;
+}, SeriesId | undefined, any[]>;
 export declare const selectorChartsFocusedDataIndex: 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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
@@ -22,4 +24,14 @@ export declare const selectorChartsIsKeyboardNavigationEnabled: import("reselect
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}, boolean, any[]>;
+export declare const selectorChartsKeyboardXAxisIndex: 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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+export declare const selectorChartsKeyboardYAxisIndex: 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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -1,7 +1,33 @@
 import { createSelector } from "../../utils/selectors.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 const selectKeyboardNavigation = state => state.keyboardNavigation;
 export const selectorChartsHasFocusedItem = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item != null);
 export const selectorChartsFocusedSeriesType = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.type);
 export const selectorChartsFocusedSeriesId = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
 export const selectorChartsFocusedDataIndex = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
-export const selectorChartsIsKeyboardNavigationEnabled = createSelector([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+export const selectorChartsIsKeyboardNavigationEnabled = createSelector([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+
+/**
+ * Selectors to override highlight behavior.
+ */
+
+const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis, series) => {
+  if (type === undefined || seriesId === undefined || dataIndex === undefined) {
+    return undefined;
+  }
+  const seriesConfig = series[type]?.series[seriesId];
+  if (!seriesConfig) {
+    return undefined;
+  }
+  let axisId = direction === 'x' ? 'xAxisId' in seriesConfig && seriesConfig.xAxisId : 'yAxisId' in seriesConfig && seriesConfig.yAxisId;
+  if (axisId === undefined || axisId === false) {
+    axisId = axis.axisIds[0];
+  }
+  return {
+    axisId,
+    dataIndex
+  };
+};
+export const selectorChartsKeyboardXAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartXAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('x'));
+export const selectorChartsKeyboardYAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('y'));

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

@@ -1,6 +1,7 @@
 import { ChartPluginSignature } from "../../models/index.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
+import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 export interface UseChartKeyboardNavigationInstance {}
 type SeriesItemIdentifier = {
   /**
@@ -30,5 +31,6 @@ export type UseChartKeyboardNavigationSignature = ChartPluginSignature<{
   defaultizedParams: UseChartKeyboardNavigationParameters;
   instance: UseChartKeyboardNavigationInstance;
   state: UseChartKeyboardNavigationState;
+  optionalDependencies: [UseChartInteractionSignature];
 }>;
 export {};

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
+import { getDefaultTickNumber, getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
@@ -99,10 +99,7 @@ export function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = getTickNumber(_extends({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = getTickNumber(axis, axisExtremums, getDefaultTickNumber(Math.abs(range[1] - range[0])));
     const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
     const scale = getScale(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

package/esm/internals/ticks.d.ts

@@ -1,6 +1,4 @@
 import type { TickParams } from "../hooks/useTicks.js";
-export declare function getTickNumber(params: TickParams & {
-  range: number[];
-  domain: any[];
-}): number;
-export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;
+export declare function getTickNumber(params: TickParams, domain: any[], defaultTickNumber: number): number;
+export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;
+export declare function getDefaultTickNumber(dimension: number): number;

package/esm/internals/ticks.js

@@ -1,14 +1,12 @@
-export function getTickNumber(params) {
+export function getTickNumber(params, domain, defaultTickNumber) {
   const {
     tickMaxStep,
     tickMinStep,
-    tickNumber,
-    range,
-    domain
+    tickNumber
   } = params;
   const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
   const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  const defaultizedTickNumber = tickNumber ?? defaultTickNumber;
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 export function scaleTickNumberByRange(tickNumber, range) {
@@ -19,4 +17,7 @@ export function scaleTickNumberByRange(tickNumber, range) {
     return 1;
   }
   return tickNumber / ((range[1] - range[0]) / 100);
+}
+export function getDefaultTickNumber(dimension) {
+  return Math.floor(Math.abs(dimension) / 50);
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.12.0
+ * @mui/x-charts v8.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -12,43 +12,62 @@ const preventDefault = event => event.preventDefault();
 const useChartInteractionListener = ({
   svgRef
 }) => {
+  const gestureManagerRef = React.useRef(null);
   React.useEffect(() => {
     const svg = svgRef.current;
-    if (!svg) {
+    if (!gestureManagerRef.current) {
+      gestureManagerRef.current = new _core.GestureManager({
+        gestures: [
+        // We separate the zoom gestures from the gestures that are not zoom related
+        // This allows us to configure the zoom gestures based on the zoom configuration.
+        new _core.PanGesture({
+          name: 'pan',
+          threshold: 0,
+          maxPointers: 1
+        }), new _core.PanGesture({
+          name: 'zoomPan',
+          threshold: 0,
+          maxPointers: 1,
+          preventIf: ['zoomTapAndDrag']
+        }), new _core.MoveGesture({
+          name: 'move',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
+        }), new _core.PinchGesture({
+          name: 'zoomPinch',
+          threshold: 5,
+          preventIf: ['pan', 'zoomPan']
+        }), new _core.TurnWheelGesture({
+          name: 'zoomTurnWheel',
+          sensitivity: 0.01,
+          initialDelta: 1
+        }), new _core.TapGesture({
+          name: 'tap',
+          maxDistance: 10,
+          preventIf: ['pan', 'zoomPan', 'zoomPinch']
+        }), new _core.PressGesture({
+          name: 'quickPress',
+          duration: 50,
+          maxDistance: 10
+        }), new _core.TapAndDragGesture({
+          name: 'zoomTapAndDrag',
+          tapMaxDistance: 10,
+          dragThreshold: 10,
+          dragTimeout: 1000
+        })]
+      });
+    }
+
+    // Assign gesture manager after initialization
+    const gestureManager = gestureManagerRef.current;
+    if (!svg || !gestureManager) {
       return undefined;
     }
-    const gestureManager = new _core.GestureManager({
-      gestures: [new _core.PanGesture({
-        name: 'pan',
-        threshold: 0,
-        maxPointers: 1
-      }), new _core.MoveGesture({
-        name: 'move',
-        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
-      }), new _core.PinchGesture({
-        name: 'pinch',
-        threshold: 5,
-        preventIf: ['pan']
-      }), new _core.TurnWheelGesture({
-        name: 'turnWheel',
-        sensitivity: 0.01,
-        initialDelta: 1
-      }), new _core.TapGesture({
-        name: 'tap',
-        maxDistance: 10,
-        preventIf: ['pan', 'pinch']
-      }), new _core.PressGesture({
-        name: 'quickPress',
-        duration: 50,
-        maxDistance: 10
-      })]
-    });
-    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag'], svg);
     return () => {
       // Cleanup gesture manager
-      gestureManager.destroy();
+      gestureManager.unregisterAllGestures(svg);
     };
-  }, [svgRef]);
+  }, [svgRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {
     // Forcefully cast the svgRef to any, it is annoying to fix the types.
     const svg = svgRef.current;
@@ -57,6 +76,14 @@ const useChartInteractionListener = ({
       cleanup: () => svg?.removeEventListener(interaction, callback)
     };
   }, [svgRef]);
+  const updateZoomInteractionListeners = React.useCallback((interaction, options) => {
+    const svg = svgRef.current;
+    const gestureManager = gestureManagerRef.current;
+    if (!gestureManager || !svg) {
+      return;
+    }
+    gestureManager.setGestureOptions(interaction, svg, options ?? {});
+  }, [svgRef, gestureManagerRef]);
   React.useEffect(() => {
     const svg = svgRef.current;
 
@@ -73,7 +100,8 @@ const useChartInteractionListener = ({
   }, [svgRef]);
   return {
     instance: {
-      addInteractionListener
+      addInteractionListener,
+      updateZoomInteractionListeners
     }
   };
 };

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

@@ -1,16 +1,23 @@
-import { MoveEvent, PanEvent, PinchEvent, PressEvent, TapEvent, TurnWheelEvent } from '@mui/x-internal-gestures/core';
+import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type TapAndDragEvent, type TapAndDragGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'pinch' | 'pinchStart' | 'pinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'turnWheel' | 'tap';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'zoomTurnWheel' | 'tap';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
 export type AddInteractionListener = {
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pinch' | 'pinchStart' | 'pinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'turnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd', callback: (event: TapAndDragEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+};
+export type UpdateZoomInteractionListeners = {
+  (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
+  (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
+  (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}
@@ -22,6 +29,13 @@ export interface UseChartInteractionListenerInstance {
    * @param callback The callback to call when the interaction occurs.
    */
   addInteractionListener: AddInteractionListener;
+  /**
+   * Updates the zoom interaction listeners with the provided options.
+   *
+   * @param interaction The interaction to update.
+   * @param options The options to apply to the interaction.
+   */
+  updateZoomInteractionListeners: UpdateZoomInteractionListeners;
 }
 export type UseChartInteractionListenerSignature = ChartPluginSignature<{
   params: UseChartInteractionListenerParameters;

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

@@ -13,6 +13,7 @@ type GetAxesScalesParams<T extends ChartSeriesType = ChartSeriesType> = {
    * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
    */
   preferStrictDomainInLineCharts?: boolean;
+  defaultTickNumber: number;
 };
 export declare function getXAxesScales<T extends ChartSeriesType>({
   drawingArea,
@@ -20,7 +21,8 @@ export declare function getXAxesScales<T extends ChartSeriesType>({
   axis: axes,
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }: GetAxesScalesParams<T> & {
   axis?: DefaultedAxis[];
 }): Record<AxisId, ScaleDefinition>;
@@ -30,7 +32,8 @@ export declare function getYAxesScales<T extends ChartSeriesType>({
   axis: axes,
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }: GetAxesScalesParams<T> & {
   axis?: DefaultedAxis[];
 }): Record<AxisId, ScaleDefinition>;