@mui/x-charts-pro 8.1.0 → 8.2.0

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

@@ -54,7 +54,7 @@ export const useChartProZoom = ({
     }
     store.update(prevState => {
       if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        console.error([`MUI X: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
       return _extends({}, prevState, {
         zoom: _extends({}, prevState.zoom, {

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

@@ -1,7 +1,7 @@
 import { ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -85,8 +85,8 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       resultsCount: () => number;
       resetResultsCount: () => void;
     } & {
-      resultFunc: (resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+      resultFunc: (resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
@@ -94,27 +94,27 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
       dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-      }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
+      }) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       } & {
         resultFunc: (resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined;
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined;
         memoizedResultFunc: ((resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) & {
           clearCache: () => void;
           resultsCount: () => number;
           resetResultsCount: () => void;
         };
-        lastResult: () => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined;
+        lastResult: () => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined;
         dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
         } | undefined];
         recomputations: () => number;
         resetRecomputations: () => void;
@@ -138,8 +138,8 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       resultsCount: () => number;
       resetResultsCount: () => void;
     } & {
-      resultFunc: (resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+      resultFunc: (resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
@@ -147,27 +147,27 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
       dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-      }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
+      }) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       } & {
         resultFunc: (resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined;
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined;
         memoizedResultFunc: ((resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) & {
           clearCache: () => void;
           resultsCount: () => number;
           resetResultsCount: () => void;
         };
-        lastResult: () => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined;
+        lastResult: () => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined;
         dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
         } | undefined];
         recomputations: () => number;
         resetRecomputations: () => void;

package/esm/themeAugmentation/components.d.ts

@@ -1,19 +1,15 @@
 import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
-  // BarChartPro components
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];
   };
-  // LineChartPro components
   MuiLineChartPro?: {
     defaultProps?: ComponentsProps['MuiLineChartPro'];
   };
-  // Heatmap components
   MuiHeatmap?: {
     defaultProps?: ComponentsProps['MuiHeatmap'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
   };
-  // ScatterChartPro components
   MuiScatterChartPro?: {
     defaultProps?: ComponentsProps['MuiScatterChartPro'];
   };

package/esm/themeAugmentation/components.js

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

package/esm/themeAugmentation/index.d.ts

@@ -1,4 +1,4 @@
 export type * from '@mui/x-charts/themeAugmentation';
-export type * from './overrides';
-export type * from './props';
-export type * from './components';
+export type * from "./overrides.js";
+export type * from "./props.js";
+export type * from "./components.js";

package/esm/themeAugmentation/overrides.d.ts

@@ -1,11 +1,8 @@
 import { HeatmapClassKey } from "../Heatmap/index.js";
 export interface ChartsProComponentNameToClassKey {
-  // Heatmap components
   MuiHeatmap: HeatmapClassKey;
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}
 }
-
-// disable automatic export
 export {};

package/esm/themeAugmentation/overrides.js

@@ -0,0 +1,2 @@
+// disable automatic export
+export {};

package/esm/themeAugmentation/props.d.ts

@@ -3,18 +3,12 @@ import { BarChartProProps } from "../BarChartPro/index.js";
 import { HeatmapProps } from "../Heatmap/Heatmap.js";
 import { LineChartProProps } from "../LineChartPro/index.js";
 export interface ChartsProComponentsPropsList {
-  // BarChartPro components
   MuiBarChartPro: BarChartProProps;
-  // LineChartPro components
   MuiLineChartPro: LineChartProProps;
-  // Heatmap components
   MuiHeatmap: HeatmapProps;
-  // ScatterChartPro components
   MuiScatterChartPro: ScatterChartProProps;
 }
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends ChartsProComponentsPropsList {}
 }
-
-// disable automatic export
 export {};

package/esm/themeAugmentation/props.js

@@ -0,0 +1,2 @@
+// disable automatic export
+export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.1.0
+ * @mui/x-charts-pro v8.2.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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

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

package/internals/plugins/useChartProExport/common.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createExportIframe = createExportIframe;
+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/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/internals/plugins/useChartProExport/exportImage.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.exportImage = exportImage;
+exports.getDrawDocument = void 0;
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _export = require("@mui/x-internals/export");
+var _common = require("./common");
+const getDrawDocument = async () => {
+  try {
+    const module = await Promise.resolve().then(() => (0, _interopRequireWildcard2.default)(require('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
+    });
+  }
+};
+exports.getDrawDocument = getDrawDocument;
+async function exportImage(element, params) {
+  const {
+    fileName,
+    type = 'image/png',
+    quality = 0.9
+  } = params ?? {};
+  const drawDocumentPromise = getDrawDocument();
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  const doc = (0, _ownerDocument.default)(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 = (0, _common.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((0, _export.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/internals/plugins/useChartProExport/print.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.printChart = printChart;
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _export = require("@mui/x-internals/export");
+var _common = require("./common");
 function printChart(element, {
   fileName
 } = {}) {
-  const printWindow = buildPrintWindow(fileName);
+  const printWindow = (0, _common.createExportIframe)(fileName);
   const doc = (0, _ownerDocument.default)(element);
   printWindow.onload = async () => {
     const printDoc = printWindow.contentDocument;
@@ -17,7 +19,9 @@ 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((0, _export.loadStyleSheets)(printDoc, root));
     printWindow.contentWindow.print();
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
@@ -28,52 +32,4 @@ 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 = (0, _ownerDocument.default)(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/internals/plugins/useChartProExport/useChartProExport.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartProExport = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _print = require("./print");
+var _exportImage = require("./exportImage");
 function waitForAnimationFrame() {
   let resolve;
   const promise = new Promise(res => {
@@ -29,6 +30,23 @@ const useChartProExport = ({
         // Wait for animation frame to ensure the animation finished
         await waitForAnimationFrame();
         (0, _print.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 (0, _exportImage.exportImage)(chartRoot, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as image:', error);
       } finally {
         enableAnimation();
       }
@@ -36,10 +54,12 @@ const useChartProExport = ({
   };
   return {
     publicAPI: {
-      exportAsPrint
+      exportAsPrint,
+      exportAsImage
     },
     instance: {
-      exportAsPrint
+      exportAsPrint,
+      exportAsImage
     }
   };
 };

package/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/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -61,7 +61,7 @@ const useChartProZoom = ({
     }
     store.update(prevState => {
       if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        console.error([`MUI X: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
       return (0, _extends2.default)({}, prevState, {
         zoom: (0, _extends2.default)({}, prevState.zoom, {