@mui/x-charts-pro 8.11.2 → 8.12.0

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -127,6 +127,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @default false
    */
   disableVoronoi: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -210,6 +211,15 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -239,10 +249,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: PropTypes.number,
+  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature, UseChartProExportSignature];
-export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginsSignatures>;
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom, useChartProExport];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/ScatterChartPro/index.d.ts

@@ -1 +1,2 @@
-export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.plugins.js";

package/esm/ScatterChartPro/index.js

@@ -1 +1,2 @@
-export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.plugins.js";

package/esm/context/ChartProApi.d.ts

@@ -1,20 +1,22 @@
 import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
-import { HeatmapPluginsSignatures } from "../Heatmap/Heatmap.plugins.js";
-import { LineChartProPluginsSignatures } from "../LineChartPro/LineChartPro.plugins.js";
-import { ScatterChartProPluginsSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
-import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins.js";
+import { HeatmapPluginSignatures } from "../Heatmap/Heatmap.plugins.js";
+import { LineChartProPluginSignatures } from "../LineChartPro/LineChartPro.plugins.js";
+import { ScatterChartProPluginSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
+import { BarChartProPluginSignatures } from "../BarChartPro/BarChartPro.plugins.js";
 import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
-import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { FunnelChartPluginSignatures } from "../FunnelChart/FunnelChart.plugins.js";
+import { RadarChartProPluginSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
 import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
+import { SankeyChartPluginSignatures } from "../SankeyChart/SankeyChart.plugins.js";
 export type ProPluginsPerSeriesType = {
-  heatmap: HeatmapPluginsSignatures;
-  line: LineChartProPluginsSignatures;
-  scatter: ScatterChartProPluginsSignatures;
-  bar: BarChartProPluginsSignatures;
-  funnel: FunnelChartPluginsSignatures;
-  radar: RadarChartProPluginsSignatures;
+  heatmap: HeatmapPluginSignatures;
+  line: LineChartProPluginSignatures;
+  scatter: ScatterChartProPluginSignatures;
+  bar: BarChartProPluginSignatures;
+  funnel: FunnelChartPluginSignatures;
+  radar: RadarChartProPluginSignatures;
   pie: PieChartProPluginSignatures;
+  sankey: SankeyChartPluginSignatures;
   composition: DefaultPluginSignatures;
 };
 /**

package/esm/index.d.ts

@@ -26,6 +26,7 @@ export * from "./constants/index.js";
 export * from "./hooks/index.js";
 export * from "./context/index.js";
 export * from "./models/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.11.2
+ * @mui/x-charts-pro v8.12.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -37,6 +37,7 @@ export * from "./constants/index.js";
 export * from "./hooks/index.js";
 export * from "./context/index.js";
 export * from "./models/index.js";
+export * from "./plugins/index.js";
 // Locales should be imported from `@mui/x-charts-pro/locales`
 // export * from './locales';
 export * from "./colorPalettes/index.js";

package/esm/internals/material/components/BasePopper.js

@@ -54,7 +54,7 @@ export function BasePopper(props) {
       transition,
       placement
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -116,7 +116,7 @@ export function BasePopper(props) {
     transition: transition,
     placement: placement,
     modifiers: modifiers
-  }, rest, {
+  }, other, {
     children: content
   }));
 }

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

@@ -1 +1,5 @@
-export declare function createExportIframe(title?: string): HTMLIFrameElement;
+export declare function createExportIframe(title?: string): HTMLIFrameElement;
+/**
+ * Applies styles to an element and returns the previous styles.
+ */
+export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;

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

@@ -5,4 +5,17 @@ export function createExportIframe(title) {
   iframeEl.style.height = '0px';
   iframeEl.title = title || document.title;
   return iframeEl;
+}
+
+/**
+ * Applies styles to an element and returns the previous styles.
+ */
+export function applyStyles(element, styles) {
+  const previousStyles = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    const prev = element.style.getPropertyValue(key);
+    previousStyles[key] = prev;
+    element.style.setProperty(key, value);
+  });
+  return previousStyles;
 }

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

@@ -1,3 +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>;
+export declare function exportImage(element: HTMLElement | SVGElement, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;

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

@@ -1,6 +1,6 @@
 import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
-import { createExportIframe } from "./common.js";
+import { applyStyles, createExportIframe } from "./common.js";
 import { defaultOnBeforeExport } from "./defaults.js";
 export const getDrawDocument = async () => {
   try {
@@ -12,7 +12,7 @@ export const getDrawDocument = async () => {
     });
   }
 };
-export async function exportImage(element, params) {
+export async function exportImage(element, svg, params) {
   const {
     fileName,
     type = 'image/png',
@@ -21,18 +21,14 @@ export async function exportImage(element, params) {
     copyStyles = true
   } = 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);
+  /* We apply the min/max width and height to ensure the SVG doesn't resize in the export.
+   * We apply to the original SVG so that the cloned tree will contain the styles and revert these
+   * styles changes after the chart is cloned. */
+  const previousStyles = applyStyles(svg, {
+    width: `${svg.getBoundingClientRect().width}px`
+  });
   let resolve;
   const iframeLoadPromise = new Promise(res => {
     resolve = res;
@@ -40,10 +36,12 @@ export async function exportImage(element, params) {
   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;
+    applyStyles(svg, previousStyles);
+    exportDoc.body.replaceChildren(elementClone);
     exportDoc.body.style.margin = '0px';
+    /* The body's parent has a width of 0, so we use fit-content to ensure that the body adjusts its width to the width
+     * of its children. */
+    exportDoc.body.style.width = 'fit-content';
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
@@ -55,6 +53,15 @@ export async function exportImage(element, params) {
   await iframeLoadPromise;
   await onBeforeExport(iframe);
   const drawDocument = await drawDocumentPromise;
+
+  /* Use the size from the export body in case `onBeforeExport` adds some elements that should be in the export. */
+  const exportDocBodySize = iframe.contentDocument.body.getBoundingClientRect();
+  const canvas = document.createElement('canvas');
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = exportDocBodySize.width * ratio;
+  canvas.height = exportDocBodySize.height * ratio;
+  canvas.style.width = `${exportDocBodySize.width}px`;
+  canvas.style.height = `${exportDocBodySize.height}px`;
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
@@ -67,9 +74,9 @@ export async function exportImage(element, params) {
   const blobPromise = new Promise(res => {
     resolveBlobPromise = res;
   });
-  canvas.toBlob(blob => resolveBlobPromise(blob), type, quality);
   let blob;
   try {
+    canvas.toBlob(b => resolveBlobPromise(b), type, quality);
     blob = await blobPromise;
   } catch (error) {
     throw new Error('MUI X Charts: Failed to create blob from canvas.', {
@@ -78,7 +85,6 @@ export async function exportImage(element, params) {
   }
   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);

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

@@ -12,9 +12,8 @@ export function printChart(element, {
   printWindow.onload = async () => {
     const printDoc = printWindow.contentDocument;
     const elementClone = element.cloneNode(true);
-    const container = document.createElement('div');
-    container.appendChild(elementClone);
-    printDoc.body.innerHTML = container.innerHTML;
+    printDoc.body.replaceChildren(elementClone);
+    printDoc.body.style.margin = '0px';
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {

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

@@ -13,6 +13,7 @@ function waitForAnimationFrame() {
 }
 export const useChartProExport = ({
   chartRootRef,
+  svgRef,
   instance
 }) => {
   const exportAsPrint = async options => {
@@ -32,12 +33,13 @@ export const useChartProExport = ({
   };
   const exportAsImage = async options => {
     const chartRoot = chartRootRef.current;
-    if (chartRoot) {
+    const svg = svgRef.current;
+    if (chartRoot && svg) {
       const enableAnimation = instance.disableAnimation();
       try {
         // Wait for animation frame to ensure the animation finished
         await waitForAnimationFrame();
-        await exportImage(chartRoot, options);
+        await exportImage(chartRoot, svg, options);
       } catch (error) {
         console.error('MUI X Charts: Error exporting chart as image:', error);
       } finally {

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

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
+import { ChartPluginSignature } from '@mui/x-charts/internals';
 export interface UseChartProExportParameters {}
 export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
 export interface UseChartProExportState {
@@ -74,5 +74,4 @@ export type UseChartProExportSignature = ChartPluginSignature<{
   state: UseChartProExportState;
   publicAPI: UseChartProExportPublicApi;
   instance: UseChartProExportInstance;
-  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
 }>;

package/esm/plugins/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/plugins';
+export { useChartProExport, type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export { useChartProZoom, type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";

package/esm/plugins/index.js

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/plugins';
+export { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
+export { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";

package/index.d.ts

@@ -26,6 +26,7 @@ export * from "./constants/index.js";
 export * from "./hooks/index.js";
 export * from "./context/index.js";
 export * from "./models/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.11.2
+ * @mui/x-charts-pro v8.12.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -344,6 +344,18 @@ Object.keys(_models).forEach(function (key) {
     }
   });
 });
+var _plugins = require("./plugins");
+Object.keys(_plugins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _plugins[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugins[key];
+    }
+  });
+});
 var _colorPalettes = require("./colorPalettes");
 Object.keys(_colorPalettes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/material/components/BasePopper.js

@@ -62,7 +62,7 @@ function BasePopper(props) {
       transition,
       placement
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -124,7 +124,7 @@ function BasePopper(props) {
     transition: transition,
     placement: placement,
     modifiers: modifiers
-  }, rest, {
+  }, other, {
     children: content
   }));
 }

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

@@ -1 +1,5 @@
-export declare function createExportIframe(title?: string): HTMLIFrameElement;
+export declare function createExportIframe(title?: string): HTMLIFrameElement;
+/**
+ * Applies styles to an element and returns the previous styles.
+ */
+export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;

package/internals/plugins/useChartProExport/common.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.applyStyles = applyStyles;
 exports.createExportIframe = createExportIframe;
 function createExportIframe(title) {
   const iframeEl = document.createElement('iframe');
@@ -11,4 +12,17 @@ function createExportIframe(title) {
   iframeEl.style.height = '0px';
   iframeEl.title = title || document.title;
   return iframeEl;
+}
+
+/**
+ * Applies styles to an element and returns the previous styles.
+ */
+function applyStyles(element, styles) {
+  const previousStyles = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    const prev = element.style.getPropertyValue(key);
+    previousStyles[key] = prev;
+    element.style.setProperty(key, value);
+  });
+  return previousStyles;
 }

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

@@ -1,3 +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>;
+export declare function exportImage(element: HTMLElement | SVGElement, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;

package/internals/plugins/useChartProExport/exportImage.js

@@ -22,7 +22,7 @@ const getDrawDocument = async () => {
   }
 };
 exports.getDrawDocument = getDrawDocument;
-async function exportImage(element, params) {
+async function exportImage(element, svg, params) {
   const {
     fileName,
     type = 'image/png',
@@ -31,18 +31,14 @@ async function exportImage(element, params) {
     copyStyles = true
   } = 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);
+  /* We apply the min/max width and height to ensure the SVG doesn't resize in the export.
+   * We apply to the original SVG so that the cloned tree will contain the styles and revert these
+   * styles changes after the chart is cloned. */
+  const previousStyles = (0, _common.applyStyles)(svg, {
+    width: `${svg.getBoundingClientRect().width}px`
+  });
   let resolve;
   const iframeLoadPromise = new Promise(res => {
     resolve = res;
@@ -50,10 +46,12 @@ async function exportImage(element, params) {
   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;
+    (0, _common.applyStyles)(svg, previousStyles);
+    exportDoc.body.replaceChildren(elementClone);
     exportDoc.body.style.margin = '0px';
+    /* The body's parent has a width of 0, so we use fit-content to ensure that the body adjusts its width to the width
+     * of its children. */
+    exportDoc.body.style.width = 'fit-content';
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
@@ -65,6 +63,15 @@ async function exportImage(element, params) {
   await iframeLoadPromise;
   await onBeforeExport(iframe);
   const drawDocument = await drawDocumentPromise;
+
+  /* Use the size from the export body in case `onBeforeExport` adds some elements that should be in the export. */
+  const exportDocBodySize = iframe.contentDocument.body.getBoundingClientRect();
+  const canvas = document.createElement('canvas');
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = exportDocBodySize.width * ratio;
+  canvas.height = exportDocBodySize.height * ratio;
+  canvas.style.width = `${exportDocBodySize.width}px`;
+  canvas.style.height = `${exportDocBodySize.height}px`;
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
@@ -77,9 +84,9 @@ async function exportImage(element, params) {
   const blobPromise = new Promise(res => {
     resolveBlobPromise = res;
   });
-  canvas.toBlob(blob => resolveBlobPromise(blob), type, quality);
   let blob;
   try {
+    canvas.toBlob(b => resolveBlobPromise(b), type, quality);
     blob = await blobPromise;
   } catch (error) {
     throw new Error('MUI X Charts: Failed to create blob from canvas.', {
@@ -88,7 +95,6 @@ async function exportImage(element, params) {
   }
   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);

package/internals/plugins/useChartProExport/print.js

@@ -19,9 +19,8 @@ function printChart(element, {
   printWindow.onload = async () => {
     const printDoc = printWindow.contentDocument;
     const elementClone = element.cloneNode(true);
-    const container = document.createElement('div');
-    container.appendChild(elementClone);
-    printDoc.body.innerHTML = container.innerHTML;
+    printDoc.body.replaceChildren(elementClone);
+    printDoc.body.style.margin = '0px';
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {

package/internals/plugins/useChartProExport/useChartProExport.js

@@ -20,6 +20,7 @@ function waitForAnimationFrame() {
 }
 const useChartProExport = ({
   chartRootRef,
+  svgRef,
   instance
 }) => {
   const exportAsPrint = async options => {
@@ -39,12 +40,13 @@ const useChartProExport = ({
   };
   const exportAsImage = async options => {
     const chartRoot = chartRootRef.current;
-    if (chartRoot) {
+    const svg = svgRef.current;
+    if (chartRoot && svg) {
       const enableAnimation = instance.disableAnimation();
       try {
         // Wait for animation frame to ensure the animation finished
         await waitForAnimationFrame();
-        await (0, _exportImage.exportImage)(chartRoot, options);
+        await (0, _exportImage.exportImage)(chartRoot, svg, options);
       } catch (error) {
         console.error('MUI X Charts: Error exporting chart as image:', error);
       } finally {

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

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
+import { ChartPluginSignature } from '@mui/x-charts/internals';
 export interface UseChartProExportParameters {}
 export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
 export interface UseChartProExportState {
@@ -74,5 +74,4 @@ export type UseChartProExportSignature = ChartPluginSignature<{
   state: UseChartProExportState;
   publicAPI: UseChartProExportPublicApi;
   instance: UseChartProExportInstance;
-  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.11.2",
+  "version": "8.12.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "8.11.0",
-    "@mui/x-internal-gestures": "0.2.5",
-    "@mui/x-internals": "8.11.2",
-    "@mui/x-charts": "8.11.2",
-    "@mui/x-license": "8.11.2"
+    "@mui/x-charts": "8.12.0",
+    "@mui/x-charts-vendor": "8.12.0",
+    "@mui/x-license": "8.12.0",
+    "@mui/x-internal-gestures": "0.3.0",
+    "@mui/x-internals": "8.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/plugins/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/plugins';
+export { useChartProExport, type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export { useChartProZoom, type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";

package/plugins/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartProExport: true,
+  useChartProZoom: true
+};
+Object.defineProperty(exports, "useChartProExport", {
+  enumerable: true,
+  get: function () {
+    return _useChartProExport.useChartProExport;
+  }
+});
+Object.defineProperty(exports, "useChartProZoom", {
+  enumerable: true,
+  get: function () {
+    return _useChartProZoom.useChartProZoom;
+  }
+});
+var _plugins = require("@mui/x-charts/plugins");
+Object.keys(_plugins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _plugins[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugins[key];
+    }
+  });
+});
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");