@mui/x-charts-pro 8.6.0 → 8.8.0

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -313,6 +313,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -378,6 +379,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -438,6 +440,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -498,6 +501,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -558,6 +562,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -618,6 +623,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -678,6 +684,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -738,6 +745,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -810,6 +818,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -874,6 +883,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -933,6 +943,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -992,6 +1003,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1051,6 +1063,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1110,6 +1123,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1169,6 +1183,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1228,6 +1243,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),

package/esm/{ChartContainerPro → context}/ChartProApi.d.ts

@@ -7,7 +7,7 @@ import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugi
 import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
 import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
 import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
-type PluginsPerSeriesType = {
+export type ProPluginsPerSeriesType = {
   heatmap: HeatmapPluginsSignatures;
   line: LineChartProPluginsSignatures;
   scatter: ScatterChartProPluginsSignatures;
@@ -24,5 +24,4 @@ type PluginsPerSeriesType = {
  * If the chart is being created using composition, the `composition` value can be used.
  * @example ChartProApi<'composition'>
  */
-export type ChartProApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
-export {};
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartPublicAPI<Signatures>;

package/esm/context/ChartProApi.js

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

package/esm/context/index.d.ts

@@ -1 +1,2 @@
-export * from "./useChartApiContext.js";
+export * from "./useChartProApiContext.js";
+export type { ChartProApi } from "./ChartProApi.js";

package/esm/context/index.js

@@ -1 +1,2 @@
-export * from "./useChartApiContext.js";
+export * from "./useChartProApiContext.js";
+export {};

package/esm/context/useChartProApiContext.d.ts

@@ -0,0 +1,9 @@
+import { ChartProApi } from "./ChartProApi.js";
+/**
+ * The `useChartProApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartProApiContext<ChartProApi<'bar'>>();
+ */
+export declare function useChartProApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/esm/context/{useChartApiContext.js → useChartProApiContext.js}

@@ -1,11 +1,11 @@
 import { useChartApiContext as useChartApiContextCommunity } from '@mui/x-charts/context';
 /**
- * The `useChartApiContext` hook provides access to the chart API.
+ * The `useChartProApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
  * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
  * @example
- * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ * const apiRef = useChartProApiContext<ChartProApi<'bar'>>();
  */
-export function useChartApiContext() {
+export function useChartProApiContext() {
   return useChartApiContextCommunity();
 }

package/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useHeatmapSeries.js";
 export * from "./useFunnelSeries.js";
-export * from "./zoom/index.js";
+export * from "./zoom/index.js";
+export * from "./useChartProApiRef.js";

package/esm/hooks/index.js

@@ -1,3 +1,4 @@
 export * from "./useHeatmapSeries.js";
 export * from "./useFunnelSeries.js";
-export * from "./zoom/index.js";
+export * from "./zoom/index.js";
+export * from "./useChartProApiRef.js";

package/esm/hooks/useChartProApiRef.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { ProPluginsPerSeriesType, type ChartProApi } from "../context/ChartProApi.js";
+/**
+ * Hook that instantiates a [[ChartProApiRef]].
+ * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+ * @example
+ * ```tsx
+ * const barApiRef = useChartProApiRef<'bar'>();
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be passed to the chart component and used to interact with the chart.
+ * <BarChart apiRef={barApiRef} />
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be used to access chart methods and properties.
+ * barApiRef.current?.getSeries();
+ * ```
+ */
+export declare const useChartProApiRef: <ChartType extends keyof ProPluginsPerSeriesType = never, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)>() => React.RefObject<ChartProApi<ChartType, Signatures> | undefined>;

package/esm/hooks/useChartProApiRef.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * Hook that instantiates a [[ChartProApiRef]].
+ * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+ * @example
+ * ```tsx
+ * const barApiRef = useChartProApiRef<'bar'>();
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be passed to the chart component and used to interact with the chart.
+ * <BarChart apiRef={barApiRef} />
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be used to access chart methods and properties.
+ * barApiRef.current?.getSeries();
+ * ```
+ */
+export const useChartProApiRef = () => React.useRef(undefined);

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 import "./typeOverloads/modules.js";
 export * from '@mui/x-charts/constants';
-export * from '@mui/x-charts/context';
+export type { FadeOptions, HighlightItemData, HighlightOptions, HighlightScope } from '@mui/x-charts/context';
 export * from '@mui/x-charts/hooks';
 export * from '@mui/x-charts/colorPalettes';
 export * from '@mui/x-charts/models';
@@ -26,9 +26,11 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export type { ZoomData, ZoomFilterMode, ZoomSliderShowTooltip, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
+export * from "./context/index.js";
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
-export * from "./ChartContainerPro/index.js";
+export { ChartContainerPro } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.6.0
+ * @mui/x-charts-pro v8.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -9,7 +9,6 @@ import "./typeOverloads/modules.js";
 
 // exports from MIT package
 export * from '@mui/x-charts/constants';
-export * from '@mui/x-charts/context';
 export * from '@mui/x-charts/hooks';
 export * from '@mui/x-charts/colorPalettes';
 export * from '@mui/x-charts/models';
@@ -35,9 +34,10 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 // Pro components
+export * from "./context/index.js";
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
-export * from "./ChartContainerPro/index.js";
+export { ChartContainerPro } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";

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

@@ -3,7 +3,7 @@ import { UseChartProExportSignature } from "./useChartProExport/index.js";
 import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
 export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature>)[];

package/esm/internals/plugins/useChartProExport/exportImage.js

@@ -15,7 +15,9 @@ export async function exportImage(element, params) {
   const {
     fileName,
     type = 'image/png',
-    quality = 0.9
+    quality = 0.9,
+    onBeforeExport,
+    copyStyles = true
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const {
@@ -43,11 +45,15 @@ export async function exportImage(element, params) {
     exportDoc.body.style.margin = '0px';
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
-    await Promise.all(loadStyleSheets(exportDoc, root));
+    if (copyStyles) {
+      await Promise.all(loadStyleSheets(exportDoc, root));
+    }
     resolve();
   };
   doc.body.appendChild(iframe);
-  const [drawDocument] = await Promise.all([drawDocumentPromise, iframeLoadPromise]);
+  await iframeLoadPromise;
+  await onBeforeExport?.(iframe);
+  const drawDocument = await drawDocumentPromise;
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71

package/esm/internals/plugins/useChartProExport/print.d.ts

@@ -1,4 +1,6 @@
 import { ChartPrintExportOptions } from "./useChartProExport.types.js";
 export declare function printChart(element: HTMLElement | SVGElement, {
-  fileName
+  fileName,
+  onBeforeExport,
+  copyStyles
 }?: ChartPrintExportOptions): void;

package/esm/internals/plugins/useChartProExport/print.js

@@ -2,7 +2,9 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
 import { createExportIframe } from "./common.js";
 export function printChart(element, {
-  fileName
+  fileName,
+  onBeforeExport,
+  copyStyles = true
 } = {}) {
   const printWindow = createExportIframe(fileName);
   const doc = ownerDocument(element);
@@ -14,7 +16,9 @@ export function printChart(element, {
     printDoc.body.innerHTML = container.innerHTML;
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
-    await Promise.all(loadStyleSheets(printDoc, root));
+    if (copyStyles) {
+      await Promise.all(loadStyleSheets(printDoc, root));
+    }
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;
@@ -22,6 +26,7 @@ export function printChart(element, {
         doc.body.removeChild(printWindow);
       }
     });
+    await onBeforeExport?.(printWindow);
     printWindow.contentWindow.print();
   };
   doc.body.appendChild(printWindow);

package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -4,29 +4,39 @@ export type UseChartProExportDefaultizedParameters = UseChartProExportParameters
 export interface UseChartProExportState {
   export: {};
 }
-/**
- * The options to apply on the Print export.
- * @demos
- *   - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
- */
-export interface ChartPrintExportOptions {
+export interface ChartExportOptions {
   /**
    * The name of the file without the extension.
    * @default The title of the document the chart belongs to
    */
   fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @param {HTMLIFrameElement} iframe containing the chart to be exported.
+   * @returns {Promise<void> | void} A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => Promise<void> | void;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
 }
+/**
+ * The options to apply on the Print export.
+ * @demos
+ *   - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+ */
+export interface ChartPrintExportOptions extends ChartExportOptions {}
 /**
  * The options to apply on the image export.
  * @demos
  *   - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
  */
-export interface ChartImageExportOptions {
-  /**
-   * The name of the file without the extension.
-   * @default The title of the document the chart belongs to
-   */
-  fileName?: string;
+export interface ChartImageExportOptions extends ChartExportOptions {
   /**
    * The format of the image to be exported.
    * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const usePanOnDrag: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { translateZoom } from "./useZoom.utils.js";
+export const usePanOnDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const startRef = React.useRef(null);
+
+  // Add event for chart panning
+  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanEnabled) {
+      return () => {};
+    }
+    const handlePanStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        startRef.current = store.value.zoom.zoomData;
+      }
+    };
+    const handlePanEnd = () => {
+      startRef.current = null;
+    };
+    const throttledCallback = rafThrottle((event, zoomData) => {
+      const newZoomData = translateZoom(zoomData, {
+        x: event.detail.activeDeltaX,
+        y: -event.detail.activeDeltaY
+      }, {
+        width: drawingArea.width,
+        height: drawingArea.height
+      }, optionsLookup);
+      setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      const zoomData = startRef.current;
+      if (!zoomData) {
+        return;
+      }
+      throttledCallback(event, zoomData);
+    };
+    const panHandler = instance.addInteractionListener('pan', handlePan);
+    const panStartHandler = instance.addInteractionListener('panStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('panEnd', handlePanEnd);
+    return () => {
+      panStartHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      throttledCallback.clear();
+    };
+  }, [instance, svgRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+};

package/esm/internals/plugins/useChartProZoom/{useChartProZoom.utils.d.ts → gestureHooks/useZoom.utils.d.ts}

@@ -17,14 +17,6 @@ export declare function getWheelScaleRatio(event: WheelEvent, step: number): {
   scaleRatio: number;
   isZoomIn: boolean;
 };
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export declare function getPinchScaleRatio(curDiff: number, prevDiff: number, step: number): {
-  scaleRatio: number;
-  isZoomIn: boolean;
-};
-export declare function getDiff(eventCache: PointerEvent[]): number;
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -35,11 +27,23 @@ export declare function getHorizontalCenterRatio(point: {
   left: number;
   width: number;
 }): number;
-export declare function preventDefault(event: TouchEvent): void;
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export declare function getVerticalCenterRatio(point: {
   x: number;
   y: number;
 }, area: {
   top: number;
   height: number;
-}): number;
+}): number;
+/**
+ * Translate the zoom data by a given movement.
+ */
+export declare function translateZoom(initialZoomData: readonly ZoomData[], movement: {
+  x: number;
+  y: number;
+}, drawingArea: {
+  width: number;
+  height: number;
+}, optionsLookup: Record<string | number, DefaultizedZoomOptions>): ZoomData[];

package/esm/internals/plugins/useChartProZoom/{useChartProZoom.utils.js → gestureHooks/useZoom.utils.js}

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 /**
  * Helper to get the range (in percents of a reference range) corresponding to a given scale.
  * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
@@ -76,34 +77,6 @@ export function getWheelScaleRatio(event, step) {
   };
 }
 
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export function getPinchScaleRatio(curDiff, prevDiff, step) {
-  const scaledStep = step / 1000;
-  let scaleRatio = 0;
-  let isZoomIn = false;
-  const hasMoved = prevDiff > 0;
-  if (hasMoved && curDiff > prevDiff) {
-    // The distance between the two pointers has increased
-    scaleRatio = 1 + scaledStep;
-    isZoomIn = true;
-  }
-  if (hasMoved && curDiff < prevDiff) {
-    // The distance between the two pointers has decreased
-    scaleRatio = 1 - scaledStep;
-    isZoomIn = false;
-  }
-  return {
-    scaleRatio,
-    isZoomIn
-  };
-}
-export function getDiff(eventCache) {
-  const [firstEvent, secondEvent] = eventCache;
-  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
-}
-
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -114,13 +87,50 @@ export function getHorizontalCenterRatio(point, area) {
   } = area;
   return (point.x - left) / width;
 }
-export function preventDefault(event) {
-  event.preventDefault();
-}
+
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export function getVerticalCenterRatio(point, area) {
   const {
     top,
     height
   } = area;
   return (point.y - top) / height * -1 + 1;
+}
+
+/**
+ * Translate the zoom data by a given movement.
+ */
+export function translateZoom(initialZoomData, movement, drawingArea, optionsLookup) {
+  return initialZoomData.map(zoom => {
+    const options = optionsLookup[zoom.axisId];
+    if (!options || !options.panning) {
+      return zoom;
+    }
+    const min = zoom.start;
+    const max = zoom.end;
+    const span = max - min;
+    const MIN_PERCENT = options.minStart;
+    const MAX_PERCENT = options.maxEnd;
+    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+    let newMinPercent = min - displacement / dimension * span;
+    let newMaxPercent = max - displacement / dimension * span;
+    if (newMinPercent < MIN_PERCENT) {
+      newMinPercent = MIN_PERCENT;
+      newMaxPercent = newMinPercent + span;
+    }
+    if (newMaxPercent > MAX_PERCENT) {
+      newMaxPercent = MAX_PERCENT;
+      newMinPercent = newMaxPercent - span;
+    }
+    if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
+      return zoom;
+    }
+    return _extends({}, zoom, {
+      start: newMinPercent,
+      end: newMaxPercent
+    });
+  });
 }

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const useZoomOnPinch: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;