@mui/x-charts-pro 8.11.2 → 8.11.3

package/CHANGELOG.md

@@ -5,6 +5,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.3
+
+_Sep 16, 2025_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.3`
+
+- [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
+- [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.11.3`.
+
+#### `@mui/x-data-grid-premium@8.11.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.11.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.3`
+
+- [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.11.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.3`
+
+- [charts] Add `inline-` piecewise legend options (#19382) @JCQuintas
+- [charts] Add bar gradient example (#19174) @bernardobelchior
+- [charts] Ignore empty tick labels in label overlap computation (#19547) @alexfauquette
+- [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
+- [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
+
+#### `@mui/x-charts-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.11.3`, plus:
+
+- [charts-pro] Add chart title and caption to export demo (#19524) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.3`
+
+- [tree view] Stop looping through all items to publish the `removeItem` event (#19500) @flaviendelangle
+- [tree view] Support flat DOM structure (#19350) @flaviendelangle
+- [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
+
+#### `@mui/x-tree-view-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.11.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add styling row group recipe (#19349) @siriwatknp
+- [docs] Group demos data into the dataset folder (#19549) @alexfauquette
+- [docs] Add `shiny` bar chart example at the top  (#19416) @JCQuintas
+
+### Core
+
+- [code-infra] Axios update (#19577) @Janpot
+- [code-infra] Remove usage of copy-files command from code-infra (#19518) @brijeshb42
+- [internal] Fix naming to match convention @oliviertassinari
+
 ## 8.11.2
 
 _Sep 10, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc1NzQ2MjQwMDAwMA==";
+const releaseInfo = "MTc1ODA2NzIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -45,7 +45,7 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
       rx = 4,
       ry = 4
     } = _ref,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const classes = (0, _chartAxisZoomSliderThumbClasses.useUtilityClasses)({
     onMove,
     orientation,
@@ -87,6 +87,6 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
     ref: ref,
     rx: rx,
     ry: ry
-  }, rest));
+  }, other));
 });
 if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";

package/FunnelChart/FunnelPlot.js

@@ -57,7 +57,7 @@ const useAggregatedData = () => {
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
       const xPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
-        if ((0, _internals.isBandScale)(xScale)) {
+        if ((0, _internals.isOrdinalScale)(xScale)) {
           const position = xScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
@@ -67,7 +67,7 @@ const useAggregatedData = () => {
         return xScale(value);
       };
       const yPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
-        if ((0, _internals.isBandScale)(yScale)) {
+        if ((0, _internals.isOrdinalScale)(yScale)) {
           const position = yScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }

package/FunnelChart/useFunnelChartProps.js

@@ -93,7 +93,7 @@ const useFunnelChartProps = props => {
       axisHighlight,
       apiRef
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
   const isHorizontal = series.some(s => s.layout === 'horizontal');
   const valueAxisConfig = {
@@ -104,7 +104,7 @@ const useFunnelChartProps = props => {
   };
   const xAxis = isHorizontal ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x') : valueAxisConfig;
   const yAxis = isHorizontal ? valueAxisConfig : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
-  const chartContainerProps = (0, _extends2.default)({}, rest, {
+  const chartContainerProps = (0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'funnel',
       layout: isHorizontal ? 'horizontal' : 'vertical'
@@ -143,7 +143,8 @@ const useFunnelChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   const axisHighlightProps = (0, _extends2.default)({}, axisHighlight);
   return {

package/Heatmap/Heatmap.js

@@ -98,7 +98,8 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend
   };
   const Tooltip = slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
   const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;

package/PieChartPro/PieChartPro.js

@@ -74,6 +74,7 @@ const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
+      hideLegend: hideLegend ?? false,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
         direction: props.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,

package/SankeyChart/useSankeyChartProps.js

@@ -37,9 +37,9 @@ const useSankeyChartProps = props => {
       onNodeClick,
       onLinkClick
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
-  const chartContainerProps = (0, _extends2.default)({}, rest, {
+  const chartContainerProps = (0, _extends2.default)({}, other, {
     series: [(0, _extends2.default)({
       type: 'sankey'
     }, series)],
@@ -64,7 +64,8 @@ const useSankeyChartProps = props => {
     loading
   };
   const chartsWrapperProps = {
-    sx
+    sx,
+    hideLegend: false
   };
   return {
     chartContainerProps,

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1NzQ2MjQwMDAwMA==";
+const releaseInfo = "MTc1ODA2NzIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -38,7 +38,7 @@ export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function C
       rx = 4,
       ry = 4
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const classes = useUtilityClasses({
     onMove,
     orientation,
@@ -80,6 +80,6 @@ export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function C
     ref: ref,
     rx: rx,
     ry: ry
-  }, rest));
+  }, other));
 });
 if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";

package/esm/FunnelChart/FunnelPlot.js

@@ -4,7 +4,7 @@ const _excluded = ["onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { cartesianSeriesTypes, useSelector, useStore, isBandScale } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes, useSelector, useStore, isOrdinalScale } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
@@ -49,7 +49,7 @@ const useAggregatedData = () => {
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
       const xPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
-        if (isBandScale(xScale)) {
+        if (isOrdinalScale(xScale)) {
           const position = xScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
@@ -59,7 +59,7 @@ const useAggregatedData = () => {
         return xScale(value);
       };
       const yPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
-        if (isBandScale(yScale)) {
+        if (isOrdinalScale(yScale)) {
           const position = yScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }

package/esm/FunnelChart/useFunnelChartProps.js

@@ -87,7 +87,7 @@ export const useFunnelChartProps = props => {
       axisHighlight,
       apiRef
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
   const isHorizontal = series.some(s => s.layout === 'horizontal');
   const valueAxisConfig = {
@@ -98,7 +98,7 @@ export const useFunnelChartProps = props => {
   };
   const xAxis = isHorizontal ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x') : valueAxisConfig;
   const yAxis = isHorizontal ? valueAxisConfig : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
-  const chartContainerProps = _extends({}, rest, {
+  const chartContainerProps = _extends({}, other, {
     series: series.map(s => _extends({
       type: 'funnel',
       layout: isHorizontal ? 'horizontal' : 'vertical'
@@ -137,7 +137,8 @@ export const useFunnelChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   const axisHighlightProps = _extends({}, axisHighlight);
   return {

package/esm/Heatmap/Heatmap.js

@@ -91,7 +91,8 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend
   };
   const Tooltip = slots?.tooltip ?? HeatmapTooltip;
   const Toolbar = slots?.toolbar ?? ChartsToolbarPro;

package/esm/PieChartPro/PieChartPro.js

@@ -66,6 +66,7 @@ const PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps,
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
+      hideLegend: hideLegend ?? false,
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
         direction: props.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,

package/esm/SankeyChart/useSankeyChartProps.js

@@ -31,9 +31,9 @@ export const useSankeyChartProps = props => {
       onNodeClick,
       onLinkClick
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
-  const chartContainerProps = _extends({}, rest, {
+  const chartContainerProps = _extends({}, other, {
     series: [_extends({
       type: 'sankey'
     }, series)],
@@ -58,7 +58,8 @@ export const useSankeyChartProps = props => {
     loading
   };
   const chartsWrapperProps = {
-    sx
+    sx,
+    hideLegend: false
   };
   return {
     chartContainerProps,

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.11.2
+ * @mui/x-charts-pro v8.11.3
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.11.2
+ * @mui/x-charts-pro v8.11.3
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.11.2",
+  "version": "8.11.3",
   "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.11.3",
+    "@mui/x-internal-gestures": "0.2.6",
+    "@mui/x-charts-vendor": "8.11.3",
+    "@mui/x-internals": "8.11.3",
+    "@mui/x-license": "8.11.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",