@mui/x-charts-pro 8.1.0 → 8.3.0

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -15,6 +15,8 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useScatterChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 import { SCATTER_CHART_PRO_PLUGINS } from "./ScatterChartPro.plugins.js";
@@ -38,7 +40,8 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -65,8 +68,8 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
         }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props?.slotProps?.tooltip, {
@@ -83,6 +86,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
@@ -181,7 +185,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**
@@ -207,6 +211,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -299,6 +308,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -359,6 +371,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -414,6 +429,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -469,6 +487,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -524,6 +545,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -579,6 +603,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -634,6 +661,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -689,6 +719,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),
@@ -756,6 +789,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -815,6 +851,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -869,6 +908,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -923,6 +965,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -977,6 +1022,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1031,6 +1079,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1085,6 +1136,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1139,6 +1193,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),

package/esm/index.d.ts

@@ -25,6 +25,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
+export { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
@@ -32,4 +33,6 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
-export * from "./FunnelChart/index.js";
+export * from "./FunnelChart/index.js";
+export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsToolbarPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.1.0
+ * @mui/x-charts-pro v8.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -34,6 +34,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
+export { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 
 // Pro components
 export * from "./hooks/index.js";
@@ -43,4 +44,6 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
-export * from "./FunnelChart/index.js";
+export * from "./FunnelChart/index.js";
+export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsToolbarPro/index.js";

package/esm/internals/material/icons.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ChartsZoomInIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;

package/esm/internals/material/icons.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createSvgIcon } from '@mui/x-charts/internals';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ChartsZoomInIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment, {
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
+  })]
+}), 'ZoomIn');
+export const ChartsZoomOutIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
+}), 'ZoomOut');

package/esm/internals/material/index.d.ts

@@ -0,0 +1,4 @@
+import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
+import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
+export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;
+export declare const defaultSlotsMaterial: ChartsSlotsPro;

package/esm/internals/material/index.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import Tooltip from '@mui/material/Tooltip';
+import { defaultSlotsMaterial as communityDefaultSlotsMaterial } from '@mui/x-charts/internals';
+import { ChartsZoomInIcon, ChartsZoomOutIcon } from "./icons.js";
+const baseSlots = {
+  baseTooltip: Tooltip
+};
+const iconSlots = {
+  zoomInIcon: ChartsZoomInIcon,
+  zoomOutIcon: ChartsZoomOutIcon
+};
+export const defaultSlotsMaterial = _extends({}, communityDefaultSlotsMaterial, baseSlots, iconSlots);

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

@@ -0,0 +1 @@
+export declare function createExportIframe(title?: string): HTMLIFrameElement;

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

@@ -0,0 +1,8 @@
+export function createExportIframe(title) {
+  const iframeEl = document.createElement('iframe');
+  iframeEl.style.position = 'absolute';
+  iframeEl.style.width = '0px';
+  iframeEl.style.height = '0px';
+  iframeEl.title = title || document.title;
+  return iframeEl;
+}

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

@@ -0,0 +1,3 @@
+import { ChartImageExportOptions } from "./useChartProExport.types.js";
+export declare const getDrawDocument: () => Promise<typeof import("rasterizehtml").drawDocument>;
+export declare function exportImage(element: HTMLElement | SVGElement, params?: ChartImageExportOptions): Promise<void>;

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

@@ -0,0 +1,85 @@
+import ownerDocument from '@mui/utils/ownerDocument';
+import { loadStyleSheets } from '@mui/x-internals/export';
+import { createExportIframe } from "./common.js";
+export const getDrawDocument = async () => {
+  try {
+    const module = await import('rasterizehtml');
+    return module.drawDocument;
+  } catch (error) {
+    throw new Error(`MUI X Charts: Failed to import 'rasterizehtml' module. This dependency is mandatory when exporting a chart as an image. Make sure you have it installed as a dependency.`, {
+      cause: error
+    });
+  }
+};
+export async function exportImage(element, params) {
+  const {
+    fileName,
+    type = 'image/png',
+    quality = 0.9
+  } = params ?? {};
+  const drawDocumentPromise = getDrawDocument();
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  const doc = ownerDocument(element);
+  const canvas = document.createElement('canvas');
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const iframe = createExportIframe(fileName);
+  let resolve;
+  const iframeLoadPromise = new Promise(res => {
+    resolve = res;
+  });
+  iframe.onload = async () => {
+    const exportDoc = iframe.contentDocument;
+    const elementClone = element.cloneNode(true);
+    const container = document.createElement('div');
+    container.appendChild(elementClone);
+    exportDoc.body.innerHTML = container.innerHTML;
+    exportDoc.body.style.margin = '0px';
+    const rootCandidate = element.getRootNode();
+    const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+    await Promise.all(loadStyleSheets(exportDoc, root));
+    resolve();
+  };
+  doc.body.appendChild(iframe);
+  const [drawDocument] = await Promise.all([drawDocumentPromise, iframeLoadPromise]);
+  try {
+    await drawDocument(iframe.contentDocument, canvas, {
+      // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
+      zoom: ratio
+    });
+  } finally {
+    doc.body.removeChild(iframe);
+  }
+  let resolveBlobPromise;
+  const blobPromise = new Promise(res => {
+    resolveBlobPromise = res;
+  });
+  canvas.toBlob(blob => resolveBlobPromise(blob), type, quality);
+  let blob;
+  try {
+    blob = await blobPromise;
+  } catch (error) {
+    throw new Error('MUI X Charts: Failed to create blob from canvas.', {
+      cause: error
+    });
+  }
+  if (!blob) {
+    throw new Error('MUI X Charts: Failed to create blob from canvas.');
+    return;
+  }
+  const url = URL.createObjectURL(blob);
+  triggerDownload(url, fileName || document.title);
+  URL.revokeObjectURL(url);
+}
+function triggerDownload(url, name) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  a.click();
+}

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

@@ -1,8 +1,10 @@
 import ownerDocument from '@mui/utils/ownerDocument';
+import { loadStyleSheets } from '@mui/x-internals/export';
+import { createExportIframe } from "./common.js";
 export function printChart(element, {
   fileName
 } = {}) {
-  const printWindow = buildPrintWindow(fileName);
+  const printWindow = createExportIframe(fileName);
   const doc = ownerDocument(element);
   printWindow.onload = async () => {
     const printDoc = printWindow.contentDocument;
@@ -10,7 +12,9 @@ export function printChart(element, {
     const container = document.createElement('div');
     container.appendChild(elementClone);
     printDoc.body.innerHTML = container.innerHTML;
-    await loadStyleSheets(printDoc, element);
+    const rootCandidate = element.getRootNode();
+    const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+    await Promise.all(loadStyleSheets(printDoc, root));
     printWindow.contentWindow.print();
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
@@ -21,52 +25,4 @@ export function printChart(element, {
     });
   };
   doc.body.appendChild(printWindow);
-}
-function buildPrintWindow(title) {
-  const iframeEl = document.createElement('iframe');
-  iframeEl.style.position = 'absolute';
-  iframeEl.style.width = '0px';
-  iframeEl.style.height = '0px';
-  iframeEl.title = title || document.title;
-  return iframeEl;
-}
-function loadStyleSheets(printDoc, element) {
-  const stylesheetLoadPromises = [];
-  const doc = ownerDocument(element);
-  const rootCandidate = element.getRootNode();
-  const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
-  const headStyleElements = root.querySelectorAll("style, link[rel='stylesheet']");
-  for (let i = 0; i < headStyleElements.length; i += 1) {
-    const node = headStyleElements[i];
-    if (node.tagName === 'STYLE') {
-      const newHeadStyleElements = printDoc.createElement(node.tagName);
-      const sheet = node.sheet;
-      if (sheet) {
-        let styleCSS = '';
-        // NOTE: for-of is not supported by IE
-        for (let j = 0; j < sheet.cssRules.length; j += 1) {
-          if (typeof sheet.cssRules[j].cssText === 'string') {
-            styleCSS += `${sheet.cssRules[j].cssText}\r\n`;
-          }
-        }
-        newHeadStyleElements.appendChild(printDoc.createTextNode(styleCSS));
-        printDoc.head.appendChild(newHeadStyleElements);
-      }
-    } else if (node.getAttribute('href')) {
-      // If `href` tag is empty, avoid loading these links
-
-      const newHeadStyleElements = printDoc.createElement(node.tagName);
-      for (let j = 0; j < node.attributes.length; j += 1) {
-        const attr = node.attributes[j];
-        if (attr) {
-          newHeadStyleElements.setAttribute(attr.nodeName, attr.nodeValue || '');
-        }
-      }
-      stylesheetLoadPromises.push(new Promise(resolve => {
-        newHeadStyleElements.addEventListener('load', () => resolve());
-      }));
-      printDoc.head.appendChild(newHeadStyleElements);
-    }
-  }
-  return Promise.all(stylesheetLoadPromises);
 }

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { printChart } from "./print.js";
+import { exportImage } from "./exportImage.js";
 function waitForAnimationFrame() {
   let resolve;
   const promise = new Promise(res => {
@@ -22,6 +23,23 @@ export const useChartProExport = ({
         // Wait for animation frame to ensure the animation finished
         await waitForAnimationFrame();
         printChart(chartRoot, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as print:', error);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  const exportAsImage = async options => {
+    const chartRoot = chartRootRef.current;
+    if (chartRoot) {
+      const enableAnimation = instance.disableAnimation();
+      try {
+        // Wait for animation frame to ensure the animation finished
+        await waitForAnimationFrame();
+        await exportImage(chartRoot, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as image:', error);
       } finally {
         enableAnimation();
       }
@@ -29,10 +47,12 @@ export const useChartProExport = ({
   };
   return {
     publicAPI: {
-      exportAsPrint
+      exportAsPrint,
+      exportAsImage
     },
     instance: {
-      exportAsPrint
+      exportAsPrint,
+      exportAsImage
     }
   };
 };

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

@@ -16,6 +16,30 @@ export interface ChartPrintExportOptions {
    */
   fileName?: string;
 }
+/**
+ * The options to apply on the image export.
+ * @demos
+ *   - [Image export](/x/react-charts/export/#export-as-image)
+ */
+export interface ChartImageExportOptions {
+  /**
+   * The value to be used as the print window title.
+   * @default The title of the page.
+   */
+  fileName?: string;
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * @default 'image/png'
+   */
+  type?: 'image/png' | string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+}
 export interface UseChartProExportPublicApi {
   /**
    * Opens the browser's print dialog, which can be used to print the chart or export it as PDF.
@@ -23,6 +47,14 @@ export interface UseChartProExportPublicApi {
    * @returns {void}
    */
   exportAsPrint: (options?: ChartPrintExportOptions) => void;
+  /**
+   * Exports the chart as an image.
+   * If the provided `type` is not supported by the browser, it will default to `image/png`.
+   *
+   * @param {ChartPrintExportOptions} options Options to customize the print export.
+   * @returns {void}
+   */
+  exportAsImage: (options?: ChartImageExportOptions) => void;
 }
 export interface UseChartProExportInstance extends UseChartProExportPublicApi {}
 export type UseChartProExportSignature = ChartPluginSignature<{

package/esm/internals/plugins/useChartProZoom/calculateZoom.d.ts

@@ -0,0 +1,23 @@
+import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+export declare function calculateZoom<T extends Readonly<Pick<ZoomData, 'start' | 'end'>>>(zoom: T, step: number, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}: Pick<DefaultizedZoomOptions, 'minSpan' | 'maxSpan' | 'minStart' | 'maxEnd'>): T & {
+  start: number;
+  end: number;
+};

package/esm/internals/plugins/useChartProZoom/calculateZoom.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+export function calculateZoom(zoom, step, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}) {
+  const span = zoom.end - zoom.start;
+  let delta = span * step / 2;
+  if (delta > 0) {
+    delta = Math.min(delta, (span - minSpan) / 2);
+  } else {
+    delta = Math.max(delta, (span - maxSpan) / 2);
+  }
+  return _extends({}, zoom, {
+    start: Math.max(minStart, zoom.start + delta),
+    end: Math.min(maxEnd, zoom.end - delta)
+  });
+}

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

@@ -1,4 +1,4 @@
 import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>, zoomData?: readonly ZoomData[]): ZoomData[];
+export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;