@mui/x-charts-pro 8.1.0 → 8.2.0

package/esm/FunnelChart/{funnelStepCurve.js → curves/funnelStep.js}

@@ -2,19 +2,23 @@
  * This is a custom "step" curve generator for the funnel chart.
  * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
  *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
  * It is based on the d3-shape step curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
  */
-class FunnelStep {
-  constructor(context, isHorizontal) {
+export class FunnelStep {
+  constructor(context, isHorizontal, gap = 0) {
     this.context = void 0;
     this.line = NaN;
     this.x = NaN;
     this.y = NaN;
     this.currentPoint = 0;
     this.isHorizontal = false;
+    this.gap = 0;
     this.context = context;
     this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
   }
   areaStart() {
     this.line = 0;
@@ -41,27 +45,36 @@ class FunnelStep {
   point(x, y) {
     x = +x;
     y = +y;
+
+    // 0 is the top-left corner.
+    if (this.isHorizontal) {
+      if (this.currentPoint === 0) {
+        this.context.moveTo(x + this.gap, y);
+      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, this.y);
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.lineTo(this.x - this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
     if (this.currentPoint === 0) {
-      this.context.moveTo(x, y);
-    } else if (this.isHorizontal && (this.currentPoint === 2 || this.currentPoint === 1)) {
-      this.context.lineTo(x, this.y);
-      this.context.lineTo(x, y);
-    } else if (this.currentPoint === 3 && !this.isHorizontal) {
-      this.context.lineTo(x, this.y);
-      this.context.lineTo(x, y);
+      this.context.moveTo(x, y + this.gap);
+    } else if (this.currentPoint === 3) {
+      this.context.lineTo(x, this.y - this.gap);
+      this.context.lineTo(x, y + this.gap);
     } else {
-      this.context.lineTo(this.x, y);
-      this.context.lineTo(x, y);
+      this.context.lineTo(this.x, y - this.gap);
+      this.context.lineTo(x, y - this.gap);
     }
     this.currentPoint += 1;
     this.x = x;
     this.y = y;
   }
-}
-const funnelHorizontalStepCurve = context => {
-  return new FunnelStep(context, true);
-};
-const funnelVerticalStepCurve = context => {
-  return new FunnelStep(context, false);
-};
-export { funnelHorizontalStepCurve, funnelVerticalStepCurve };
+}

package/esm/FunnelChart/curves/getFunnelCurve.d.ts

@@ -0,0 +1,3 @@
+import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+import { FunnelCurveType } from "./curve.types.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, isHorizontal: boolean, gap?: number) => CurveFactory;

package/esm/FunnelChart/curves/getFunnelCurve.js

@@ -0,0 +1,15 @@
+import { FunnelStep } from "./funnelStep.js";
+import { Linear } from "./linear.js";
+import { Bump } from "./bump.js";
+const curveConstructor = curve => {
+  if (curve === 'step') {
+    return FunnelStep;
+  }
+  if (curve === 'bump') {
+    return Bump;
+  }
+  return Linear;
+};
+export const getFunnelCurve = (curve, isHorizontal, gap = 0) => {
+  return context => new (curveConstructor(curve))(context, isHorizontal, gap);
+};

package/esm/FunnelChart/curves/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

package/esm/FunnelChart/curves/index.js

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

package/esm/FunnelChart/curves/linear.d.ts

@@ -0,0 +1,24 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+export declare class Linear implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/esm/FunnelChart/curves/linear.js

@@ -0,0 +1,106 @@
+// From point1 to point2, get the x value from y
+const xFromY = (x1, y1, x2, y2) => y => {
+  if (y1 === y2) {
+    return x1;
+  }
+  const result = (x2 - x1) * (y - y1) / (y2 - y1) + x1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+// From point1 to point2, get the y value from x
+const yFromX = (x1, y1, x2, y2) => x => {
+  if (x1 === x2) {
+    return y1;
+  }
+  const result = (y2 - y1) * (x - x1) / (x2 - x1) + y1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+export class Linear {
+  constructor(context, isHorizontal, gap = 0) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    this.line = 1 - this.line;
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // We draw the lines only at currentPoint 1 & 3 because we need
+    // The data of a pair of points to draw the lines.
+    // Hence currentPoint 1 draws a line from point 0 to point 1 and point 1 to point 2.
+    // currentPoint 3 draws a line from point 2 to point 3 and point 3 to point 0.
+
+    if (this.isHorizontal) {
+      const yGetter = yFromX(this.x, this.y, x, y);
+      let xGap = 0;
+
+      // 0 is the top-left corner.
+      if (this.currentPoint === 1) {
+        xGap = this.x + this.gap;
+        this.context.moveTo(xGap, yGetter(xGap));
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      } else if (this.currentPoint === 3) {
+        xGap = this.x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x + this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      }
+    }
+    if (!this.isHorizontal) {
+      const xGetter = xFromY(this.x, this.y, x, y);
+      let yGap = 0;
+
+      // 0 is the top-right corner.
+      if (this.currentPoint === 1) {
+        yGap = this.y + this.gap;
+        this.context.moveTo(xGetter(yGap), yGap);
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      } else if (this.currentPoint === 3) {
+        yGap = this.y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y + this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      }
+    }
+
+    // Increment the values
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}

package/esm/FunnelChart/funnel.types.d.ts

@@ -1,9 +1,9 @@
 import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
 import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
-import { CurveType, Position } from '@mui/x-charts/models';
+import { Position } from '@mui/x-charts/models';
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import { FunnelCurveType } from "./curves/index.js";
 export type FunnelItemId = string | number;
-export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
 export type FunnelValueType = {
   /**
    * A unique identifier of the funnel section.

package/esm/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelPlotSlots {
   funnelSection?: React.ElementType<FunnelSectionProps>;
 }

package/esm/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,4 @@
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/FunnelChart/index.d.ts

@@ -1,8 +1,9 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from './FunnelChart';
+export type { FunnelChartProps } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
+export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from './funnelSectionClasses';
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";

package/esm/FunnelChart/useFunnelChartProps.d.ts

@@ -5,7 +5,7 @@ import { ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { FunnelPlotProps } from "./FunnelPlot.js";
-import type { FunnelChartProps } from './FunnelChart';
+import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props

package/esm/FunnelChart/useFunnelChartProps.js

@@ -2,11 +2,12 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import useId from '@mui/utils/useId';
 import { defaultizeMargin } from '@mui/x-charts/internals';
 import { warnOnce } from '@mui/x-internals/warning';
+import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -14,7 +15,7 @@ function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
   if (process.env.NODE_ENV !== 'production') {
     if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
-      warnOnce([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+      warnOnce([`MUI X Charts: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
     }
   }
   const side = isHorizontal ? 'bottom' : 'left';
@@ -84,7 +85,8 @@ export const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef
+      apiRef,
+      gap
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
@@ -107,7 +109,7 @@ export const useFunnelChartProps = props => {
     width,
     height,
     margin,
-    colors,
+    colors: colors ?? strawberrySkyPalette,
     xAxis: [xAxis],
     yAxis: [yAxis],
     sx,
@@ -117,6 +119,7 @@ export const useFunnelChartProps = props => {
     apiRef
   });
   const funnelPlotProps = {
+    gap,
     onItemClick,
     slots,
     slotProps

package/esm/Heatmap/Heatmap.js

@@ -187,7 +187,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.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,
   /**

package/esm/LineChartPro/LineChartPro.js

@@ -89,6 +89,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
@@ -190,7 +191,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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,
   /**

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -83,6 +83,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 +182,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,
   /**

package/esm/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/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<{