@mui/x-charts 8.5.3 → 8.7.0

package/esm/context/ChartApi.js

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

package/esm/context/ChartProvider/ChartContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/esm/context/index.d.ts

@@ -1,2 +1,3 @@
 export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./useChartApiContext.js";
+export * from "./useChartApiContext.js";
+export type { ChartApi } from "./ChartApi.js";

package/esm/context/useChartApiContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartApi } from "../ChartContainer/index.js";
+import { ChartApi } from "./ChartApi.js";
 /**
  * The `useChartApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.

package/esm/hooks/useInteractionItemProps.d.ts

@@ -1,16 +1,21 @@
 import * as React from 'react';
 import { SeriesItemIdentifier } from "../models/index.js";
+import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { ChartItemIdentifier, ChartSeriesType } from "../models/seriesType/config.js";
+import { ChartInstance } from "../internals/plugins/models/index.js";
 export declare const useInteractionItemProps: (data: SeriesItemIdentifier, skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifier[], skip?: boolean) => ({
-  onPointerEnter?: undefined;
-  onPointerLeave?: undefined;
-  onPointerDown?: undefined;
-} | {
-  onPointerEnter: () => void;
-  onPointerLeave: () => void;
-  onPointerDown: (event: React.PointerEvent) => void;
-})[];
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifier[], skip?: boolean) => {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+}[];
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifier<ChartSeriesType>): {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+};

package/esm/hooks/useInteractionItemProps.js

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { useChartContext } from "../context/ChartProvider/index.js";
-const onPointerDown = event => {
+function onPointerDown(event) {
   if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
-};
+}
 export const useInteractionItemProps = (data, skip) => {
   const {
     instance
@@ -56,32 +56,32 @@ export const useInteractionAllItemProps = (data, skip) => {
   } = useChartContext();
   const results = React.useMemo(() => {
     return data.map(item => {
-      if (skip) {
-        return {};
-      }
-      const onPointerEnter = () => {
-        if (!item) {
-          return;
-        }
-        instance.setItemInteraction(item);
-        instance.setHighlight({
-          seriesId: item.seriesId,
-          dataIndex: item.dataIndex
-        });
-      };
-      const onPointerLeave = () => {
-        if (!item) {
-          return;
-        }
-        instance.removeItemInteraction(item);
-        instance.clearHighlight();
-      };
-      return {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown
-      };
+      return skip ? {} : getInteractionItemProps(instance, item);
     });
   }, [data, instance, skip]);
   return results;
-};
+};
+export function getInteractionItemProps(instance, item) {
+  function onPointerEnter() {
+    if (!item) {
+      return;
+    }
+    instance.setItemInteraction(item);
+    instance.setHighlight({
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    });
+  }
+  function onPointerLeave() {
+    if (!item) {
+      return;
+    }
+    instance.removeItemInteraction(item);
+    instance.clearHighlight();
+  }
+  return {
+    onPointerEnter,
+    onPointerLeave,
+    onPointerDown
+  };
+}

package/esm/index.d.ts

@@ -23,6 +23,7 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export { ChartContainer } from "./ChartContainer/index.js";
+export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.3
+ * @mui/x-charts v8.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -30,6 +30,6 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";

package/esm/internals/components/NotRendered.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export declare function NotRendered<T>(_props: T): React.ReactNode;

package/esm/internals/components/NotRendered.js

@@ -0,0 +1,10 @@
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export function NotRendered(_props) {
+  throw new Error('Failed assertion: should not be rendered');
+}

package/esm/internals/index.d.ts

@@ -1,12 +1,17 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
+export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
@@ -14,6 +19,7 @@ export * from "./createSeriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
+export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";

package/esm/internals/index.js

@@ -2,14 +2,19 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
+export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
@@ -19,6 +24,7 @@ export * from "./createSeriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
+export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";

package/esm/internals/plugins/corePlugins/corePlugins.d.ts

@@ -2,10 +2,11 @@ import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
 import { type UseChartIdSignature, UseChartIdParameters } from "./useChartId/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
+import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature];
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters {}

package/esm/internals/plugins/corePlugins/corePlugins.js

@@ -2,9 +2,10 @@ import { useChartAnimation } from "./useChartAnimation/index.js";
 import { useChartDimensions } from "./useChartDimensions/index.js";
 import { useChartId } from "./useChartId/index.js";
 import { useChartSeries } from "./useChartSeries/index.js";
+import { useChartInteractionListener } from "./useChartInteractionListener/index.js";
 
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export const CHART_CORE_PLUGINS = [useChartId, useChartDimensions, useChartSeries, useChartAnimation];
+export const CHART_CORE_PLUGINS = [useChartId, useChartDimensions, useChartSeries, useChartInteractionListener, useChartAnimation];

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -149,7 +149,7 @@ export const useChartDimensions = ({
   const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
   const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && 'closest' in targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
     return isXInside(x) && isYInside(y);

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -3,7 +3,7 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
-export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<import("../../../index.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -15,7 +15,7 @@ export declare const selectorChartDrawingArea: import("reselect").Selector<impor
   top: number;
   bottom: number;
 }, []>;
-export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartPropsSize: import("reselect").Selector<import(
   width: number | undefined;
   height: number | undefined;
 }, any[]>;
-export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -67,10 +67,10 @@ export interface UseChartDimensionsInstance {
    * Checks if a point is inside the drawing area.
    * @param {number} x The x coordinate of the point.
    * @param {number} y The y coordinate of the point.
-   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
+   * @param {Element | EventTarget | null} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element | EventTarget | null) => boolean;
   /**
    * Checks if the x coordinate is inside the drawing area.
    * @param {number} x The x coordinate of the point.

package/esm/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { createChartDefaultId } from "./useChartId.utils.js";

package/esm/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -3,7 +3,7 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartInteractionListener/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartInteractionListener } from "./useChartInteractionListener.js";
+export type { UseChartInteractionListenerParameters, UseChartInteractionListenerState, UseChartInteractionListenerInstance, UseChartInteractionListenerSignature, ChartInteraction } from "./useChartInteractionListener.types.js";

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

@@ -0,0 +1 @@
+export { useChartInteractionListener } from "./useChartInteractionListener.js";

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartInteractionListenerSignature } from "./useChartInteractionListener.types.js";
+export declare const useChartInteractionListener: ChartPlugin<UseChartInteractionListenerSignature>;

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

@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
+const preventDefault = event => event.preventDefault();
+export const useChartInteractionListener = ({
+  svgRef
+}) => {
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return undefined;
+    }
+    const gestureManager = new GestureManager({
+      gestures: [new PanGesture({
+        name: 'pan',
+        threshold: 0,
+        maxPointers: 1
+      }), new MoveGesture({
+        name: 'move',
+        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
+      }), new PinchGesture({
+        name: 'pinch',
+        threshold: 5,
+        preventIf: ['pan']
+      }), new TurnWheelGesture({
+        name: 'turnWheel',
+        sensitivity: 0.01,
+        initialDelta: 1
+      }), new TapGesture({
+        name: 'tap',
+        maxDistance: 10,
+        preventIf: ['pan', 'pinch']
+      }), new PressGesture({
+        name: 'quickPress',
+        duration: 50,
+        maxDistance: 10
+      })]
+    });
+    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    return () => {
+      // Cleanup gesture manager
+      gestureManager.destroy();
+    };
+  }, [svgRef]);
+  const addInteractionListener = React.useCallback((interaction, callback, options) => {
+    // Forcefully cast the svgRef to any, it is annoying to fix the types.
+    const svg = svgRef.current;
+    svg?.addEventListener(interaction, callback, options);
+    return {
+      cleanup: () => svg?.removeEventListener(interaction, callback)
+    };
+  }, [svgRef]);
+  React.useEffect(() => {
+    const svg = svgRef.current;
+
+    // Disable gesture on safari
+    // https://use-gesture.netlify.app/docs/gestures/#about-the-pinch-gesture
+    svg?.addEventListener('gesturestart', preventDefault);
+    svg?.addEventListener('gesturechange', preventDefault);
+    svg?.addEventListener('gestureend', preventDefault);
+    return () => {
+      svg?.removeEventListener('gesturestart', preventDefault);
+      svg?.removeEventListener('gesturechange', preventDefault);
+      svg?.removeEventListener('gestureend', preventDefault);
+    };
+  }, [svgRef]);
+  return {
+    instance: {
+      addInteractionListener
+    }
+  };
+};
+useChartInteractionListener.params = {};
+useChartInteractionListener.getInitialState = () => {
+  return {};
+};

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

@@ -0,0 +1,31 @@
+import { MoveEvent, PanEvent, PinchEvent, PressEvent, TapEvent, TurnWheelEvent } 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 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: '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;
+};
+export interface UseChartInteractionListenerParameters {}
+export interface UseChartInteractionListenerState {}
+export interface UseChartInteractionListenerInstance {
+  /**
+   * Adds an interaction listener to the SVG element.
+   *
+   * @param interaction The interaction to listen to.
+   * @param callback The callback to call when the interaction occurs.
+   */
+  addInteractionListener: AddInteractionListener;
+}
+export type UseChartInteractionListenerSignature = ChartPluginSignature<{
+  params: UseChartInteractionListenerParameters;
+  defaultizedParams: UseChartInteractionListenerParameters;
+  state: UseChartInteractionListenerState;
+  instance: UseChartInteractionListenerInstance;
+}>;

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

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

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,12 +1,12 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>, any[]>;
-export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

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

@@ -1,19 +1,19 @@
-export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, number, []>;
-export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, number, []>;
-export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, number, []>;
-export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;