@mui/x-charts-pro 8.1.0 → 8.3.0

package/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
@@ -10,10 +10,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ZoomData: true,
+  ZoomFilterMode: true,
+  ZoomOptions: true,
+  ZoomSliderOptions: true
+};
+Object.defineProperty(exports, "ZoomData", {
+  enumerable: true,
+  get: function () {
+    return _internals.ZoomData;
+  }
+});
+Object.defineProperty(exports, "ZoomFilterMode", {
+  enumerable: true,
+  get: function () {
+    return _internals.ZoomFilterMode;
+  }
+});
+Object.defineProperty(exports, "ZoomOptions", {
+  enumerable: true,
+  get: function () {
+    return _internals.ZoomOptions;
+  }
+});
+Object.defineProperty(exports, "ZoomSliderOptions", {
+  enumerable: true,
+  get: function () {
+    return _internals.ZoomSliderOptions;
+  }
+});
 require("./typeOverloads/modules");
 var _constants = require("@mui/x-charts/constants");
 Object.keys(_constants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _constants[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -25,6 +56,7 @@ Object.keys(_constants).forEach(function (key) {
 var _context = require("@mui/x-charts/context");
 Object.keys(_context).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _context[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -36,6 +68,7 @@ Object.keys(_context).forEach(function (key) {
 var _hooks = require("@mui/x-charts/hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,6 +80,7 @@ Object.keys(_hooks).forEach(function (key) {
 var _colorPalettes = require("@mui/x-charts/colorPalettes");
 Object.keys(_colorPalettes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _colorPalettes[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -58,6 +92,7 @@ Object.keys(_colorPalettes).forEach(function (key) {
 var _models = require("@mui/x-charts/models");
 Object.keys(_models).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _models[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -69,6 +104,7 @@ Object.keys(_models).forEach(function (key) {
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 Object.keys(_ChartsClipPath).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsClipPath[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -80,6 +116,7 @@ Object.keys(_ChartsClipPath).forEach(function (key) {
 var _ChartsReferenceLine = require("@mui/x-charts/ChartsReferenceLine");
 Object.keys(_ChartsReferenceLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -91,6 +128,7 @@ Object.keys(_ChartsReferenceLine).forEach(function (key) {
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
 Object.keys(_ChartsAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -102,6 +140,7 @@ Object.keys(_ChartsAxis).forEach(function (key) {
 var _ChartsXAxis = require("@mui/x-charts/ChartsXAxis");
 Object.keys(_ChartsXAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsXAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -113,6 +152,7 @@ Object.keys(_ChartsXAxis).forEach(function (key) {
 var _ChartsYAxis = require("@mui/x-charts/ChartsYAxis");
 Object.keys(_ChartsYAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsYAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -124,6 +164,7 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
 Object.keys(_ChartsGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -135,6 +176,7 @@ Object.keys(_ChartsGrid).forEach(function (key) {
 var _ChartsText = require("@mui/x-charts/ChartsText");
 Object.keys(_ChartsText).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsText[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -146,6 +188,7 @@ Object.keys(_ChartsText).forEach(function (key) {
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -157,6 +200,7 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -168,6 +212,7 @@ Object.keys(_ChartsLegend).forEach(function (key) {
 var _ChartsLocalizationProvider = require("@mui/x-charts/ChartsLocalizationProvider");
 Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLocalizationProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -179,6 +224,7 @@ Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
 var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 Object.keys(_ChartsAxisHighlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxisHighlight[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -190,6 +236,7 @@ Object.keys(_ChartsAxisHighlight).forEach(function (key) {
 var _BarChart = require("@mui/x-charts/BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -201,6 +248,7 @@ Object.keys(_BarChart).forEach(function (key) {
 var _LineChart = require("@mui/x-charts/LineChart");
 Object.keys(_LineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -212,6 +260,7 @@ Object.keys(_LineChart).forEach(function (key) {
 var _PieChart = require("@mui/x-charts/PieChart");
 Object.keys(_PieChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -223,6 +272,7 @@ Object.keys(_PieChart).forEach(function (key) {
 var _ScatterChart = require("@mui/x-charts/ScatterChart");
 Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -234,6 +284,7 @@ Object.keys(_ScatterChart).forEach(function (key) {
 var _SparkLineChart = require("@mui/x-charts/SparkLineChart");
 Object.keys(_SparkLineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SparkLineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -245,6 +296,7 @@ Object.keys(_SparkLineChart).forEach(function (key) {
 var _Gauge = require("@mui/x-charts/Gauge");
 Object.keys(_Gauge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Gauge[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -256,6 +308,7 @@ Object.keys(_Gauge).forEach(function (key) {
 var _RadarChart = require("@mui/x-charts/RadarChart");
 Object.keys(_RadarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -267,6 +320,7 @@ Object.keys(_RadarChart).forEach(function (key) {
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 Object.keys(_ChartsSurface).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsSurface[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -278,6 +332,7 @@ Object.keys(_ChartsSurface).forEach(function (key) {
 var _ChartDataProvider = require("@mui/x-charts/ChartDataProvider");
 Object.keys(_ChartDataProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartDataProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -289,6 +344,7 @@ Object.keys(_ChartDataProvider).forEach(function (key) {
 var _ChartsLabel = require("@mui/x-charts/ChartsLabel");
 Object.keys(_ChartsLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -297,9 +353,11 @@ Object.keys(_ChartsLabel).forEach(function (key) {
     }
   });
 });
+var _internals = require("@mui/x-charts/internals");
 var _hooks2 = require("./hooks");
 Object.keys(_hooks2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -311,6 +369,7 @@ Object.keys(_hooks2).forEach(function (key) {
 var _Heatmap = require("./Heatmap");
 Object.keys(_Heatmap).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Heatmap[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -322,6 +381,7 @@ Object.keys(_Heatmap).forEach(function (key) {
 var _ChartContainerPro = require("./ChartContainerPro");
 Object.keys(_ChartContainerPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartContainerPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -333,6 +393,7 @@ Object.keys(_ChartContainerPro).forEach(function (key) {
 var _ChartDataProviderPro = require("./ChartDataProviderPro");
 Object.keys(_ChartDataProviderPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartDataProviderPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -344,6 +405,7 @@ Object.keys(_ChartDataProviderPro).forEach(function (key) {
 var _ScatterChartPro = require("./ScatterChartPro");
 Object.keys(_ScatterChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -355,6 +417,7 @@ Object.keys(_ScatterChartPro).forEach(function (key) {
 var _BarChartPro = require("./BarChartPro");
 Object.keys(_BarChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -366,6 +429,7 @@ Object.keys(_BarChartPro).forEach(function (key) {
 var _LineChartPro = require("./LineChartPro");
 Object.keys(_LineChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -377,6 +441,7 @@ Object.keys(_LineChartPro).forEach(function (key) {
 var _FunnelChart = require("./FunnelChart");
 Object.keys(_FunnelChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _FunnelChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -384,4 +449,28 @@ Object.keys(_FunnelChart).forEach(function (key) {
       return _FunnelChart[key];
     }
   });
+});
+var _ChartZoomSlider = require("./ChartZoomSlider");
+Object.keys(_ChartZoomSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartZoomSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartZoomSlider[key];
+    }
+  });
+});
+var _ChartsToolbarPro = require("./ChartsToolbarPro");
+Object.keys(_ChartsToolbarPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsToolbarPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarPro[key];
+    }
+  });
 });

package/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/internals/material/icons.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsZoomOutIcon = exports.ChartsZoomInIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const ChartsZoomInIcon = exports.ChartsZoomInIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
+  })]
+}), 'ZoomIn');
+const ChartsZoomOutIcon = exports.ChartsZoomOutIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.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/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/internals/material/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSlotsMaterial = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _internals = require("@mui/x-charts/internals");
+var _icons = require("./icons");
+const baseSlots = {
+  baseTooltip: _Tooltip.default
+};
+const iconSlots = {
+  zoomInIcon: _icons.ChartsZoomInIcon,
+  zoomOutIcon: _icons.ChartsZoomOutIcon
+};
+const defaultSlotsMaterial = exports.defaultSlotsMaterial = (0, _extends2.default)({}, _internals.defaultSlotsMaterial, baseSlots, iconSlots);

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<{