@mui/x-charts-pro 9.2.0 → 9.4.0

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type ScatterChartProps, type ScatterChartSlotProps, type ScatterChartSlots } from '@mui/x-charts/ScatterChart';
 import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
 import { type ChartsContainerProProps } from "../ChartsContainerPro/ChartsContainerPro.js";
 import { type ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.js";
@@ -11,7 +12,7 @@ export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 't
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<ChartsContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'onItemClick' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
   /**

package/ScatterChartPro/ScatterChartPro.js

@@ -223,11 +223,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter']).isRequired
   })]),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
@@ -273,12 +273,21 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  })),
+  }), _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -399,11 +408,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -426,11 +435,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
-    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -439,12 +443,38 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   })),
   /**
@@ -460,6 +490,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   zoomInteractionConfig: _propTypes.default.shape({
     pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
+      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['drag']).isRequired
@@ -467,24 +502,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
-    }), _propTypes.default.shape({
-      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['wheel']).isRequired
-    }), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.array,
-      type: _propTypes.default.oneOf(['pinch']).isRequired
-    }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+      type: _propTypes.default.oneOf(['brush']).isRequired
     }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
@@ -492,7 +514,15 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['brush']).isRequired
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/ScatterChartPro/ScatterChartPro.mjs

@@ -216,11 +216,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter']).isRequired
   })]),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
@@ -266,12 +266,21 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+  initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  })),
+  }), PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -392,11 +401,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -419,11 +428,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   zAxis: PropTypes.arrayOf(PropTypes.shape({
     colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -432,12 +436,38 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   })),
   /**
@@ -453,6 +483,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   zoomInteractionConfig: PropTypes.shape({
     pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -460,24 +495,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
-    }), PropTypes.shape({
-      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
-    }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
-      type: PropTypes.oneOf(['pinch']).isRequired
-    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+      type: PropTypes.oneOf(['brush']).isRequired
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
@@ -485,7 +507,15 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['brush']).isRequired
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/index.js

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

package/index.mjs

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

package/internals/plugins/useChartProExport/exportImage.js

@@ -10,6 +10,7 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _export = require("@mui/x-internals/export");
+var _warning = require("@mui/x-internals/warning");
 var _common = require("./common");
 var _defaults = require("./defaults");
 const getDrawDocument = async () => {
@@ -30,11 +31,15 @@ async function exportImage(element, svg, params) {
     quality = 0.9,
     onBeforeExport = _defaults.defaultOnBeforeExport,
     copyStyles = true,
-    nonce
+    nonce,
+    pixelRatio
   } = params ?? {};
+  if (process.env.NODE_ENV !== 'production' && pixelRatio !== undefined && (!Number.isFinite(pixelRatio) || pixelRatio <= 0)) {
+    (0, _warning.warnOnce)('MUI X Charts: `pixelRatio` must be a finite number greater than 0 when exporting a chart as an image.', 'error');
+  }
   const drawDocumentPromise = getDrawDocument();
   const doc = (0, _ownerDocument.default)(element);
-  const ratio = Math.max(window.devicePixelRatio || 1, 1);
+  const ratio = pixelRatio ?? Math.max(window.devicePixelRatio || 1, 1);
   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
@@ -49,6 +54,7 @@ async function exportImage(element, svg, params) {
   iframe.onload = async () => {
     const exportDoc = iframe.contentDocument;
     const elementClone = element.cloneNode(true);
+    elementClone.querySelectorAll('[data-hide-on-export]').forEach(el => el.remove());
     (0, _common.applyStyles)(svg, previousStyles);
     exportDoc.body.replaceChildren(elementClone);
     exportDoc.body.style.margin = '0px';

package/internals/plugins/useChartProExport/exportImage.mjs

@@ -1,6 +1,7 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
+import { warnOnce } from '@mui/x-internals/warning';
 import { applyStyles, copyCanvasesContent, createExportIframe } from "./common.mjs";
 import { defaultOnBeforeExport } from "./defaults.mjs";
 export const getDrawDocument = async () => {
@@ -20,11 +21,15 @@ export async function exportImage(element, svg, params) {
     quality = 0.9,
     onBeforeExport = defaultOnBeforeExport,
     copyStyles = true,
-    nonce
+    nonce,
+    pixelRatio
   } = params ?? {};
+  if (process.env.NODE_ENV !== 'production' && pixelRatio !== undefined && (!Number.isFinite(pixelRatio) || pixelRatio <= 0)) {
+    warnOnce('MUI X Charts: `pixelRatio` must be a finite number greater than 0 when exporting a chart as an image.', 'error');
+  }
   const drawDocumentPromise = getDrawDocument();
   const doc = ownerDocument(element);
-  const ratio = Math.max(window.devicePixelRatio || 1, 1);
+  const ratio = pixelRatio ?? Math.max(window.devicePixelRatio || 1, 1);
   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
@@ -39,6 +44,7 @@ export async function exportImage(element, svg, params) {
   iframe.onload = async () => {
     const exportDoc = iframe.contentDocument;
     const elementClone = element.cloneNode(true);
+    elementClone.querySelectorAll('[data-hide-on-export]').forEach(el => el.remove());
     applyStyles(svg, previousStyles);
     exportDoc.body.replaceChildren(elementClone);
     exportDoc.body.style.margin = '0px';

package/internals/plugins/useChartProExport/print.js

@@ -20,6 +20,7 @@ function printChart(element, {
   printWindow.onload = async () => {
     const printDoc = printWindow.contentDocument;
     const elementClone = element.cloneNode(true);
+    elementClone.querySelectorAll('[data-hide-on-export]').forEach(el => el.remove());
     printDoc.body.replaceChildren(elementClone);
     printDoc.body.style.margin = '0px';
     const rootCandidate = element.getRootNode();

package/internals/plugins/useChartProExport/print.mjs

@@ -13,6 +13,7 @@ export function printChart(element, {
   printWindow.onload = async () => {
     const printDoc = printWindow.contentDocument;
     const elementClone = element.cloneNode(true);
+    elementClone.querySelectorAll('[data-hide-on-export]').forEach(el => el.remove());
     printDoc.body.replaceChildren(elementClone);
     printDoc.body.style.margin = '0px';
     const rootCandidate = element.getRootNode();

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

@@ -55,6 +55,12 @@ export interface ChartImageExportOptions extends ChartExportOptions {
    * @default 0.9
    */
   quality?: number;
+  /**
+   * The pixel ratio used when rasterizing the chart to a canvas. Higher values produce
+   * sharper images at the cost of a larger file size.
+   * @default The larger of `window.devicePixelRatio` and `1`
+   */
+  pixelRatio?: number;
 }
 export interface UseChartProExportPublicApi {
   /**

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

@@ -55,6 +55,12 @@ export interface ChartImageExportOptions extends ChartExportOptions {
    * @default 0.9
    */
   quality?: number;
+  /**
+   * The pixel ratio used when rasterizing the chart to a canvas. Higher values produce
+   * sharper images at the cost of a larger file size.
+   * @default The larger of `window.devicePixelRatio` and `1`
+   */
+  pixelRatio?: number;
 }
 export interface UseChartProExportPublicApi {
   /**

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -11,9 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
 var _utils = require("@mui/material/utils");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _rangeButtonValueToZoom = require("../../../ChartsToolbarPro/rangeButtonValueToZoom");
 var _calculateZoom = require("./calculateZoom");
 var _useZoomOnWheel = require("./gestureHooks/useZoomOnWheel");
 var _useZoomOnPinch = require("./gestureHooks/useZoomOnPinch");
@@ -25,6 +27,12 @@ var _useZoomOnBrush = require("./gestureHooks/useZoomOnBrush");
 var _useZoomOnDoubleTapReset = require("./gestureHooks/useZoomOnDoubleTapReset");
 var _initializeZoomInteractionConfig = require("./initializeZoomInteractionConfig");
 var _initializeZoomData = require("./initializeZoomData");
+/**
+ * Type guard for `initialZoom` entries provided as a range value.
+ */
+function isInitialZoomRange(entry) {
+  return 'value' in entry;
+}
 const useChartProZoom = pluginData => {
   const {
     store,
@@ -62,6 +70,68 @@ const useChartProZoom = pluginData => {
     }));
     removeIsInteracting();
   }, [store, paramsZoomData, removeIsInteracting]);
+
+  // Resolve `initialZoom` entries provided as range values (e.g. `{ axisId, value: { unit: 'month' } }`).
+  // These depend on the computed axis domains, which are only available after the first render
+  // (unless the user provides explicit `width`/`height`), so they are resolved once on mount.
+  // A layout effect avoids a visible unzoomed frame.
+  const hasResolvedInitialZoomRanges = React.useRef(false);
+  (0, _useEnhancedEffect.default)(() => {
+    if (hasResolvedInitialZoomRanges.current) {
+      // `initialZoom` is only read on mount, like the rest of the initial zoom state.
+      return;
+    }
+    hasResolvedInitialZoomRanges.current = true;
+    if (paramsZoomData !== undefined) {
+      // The zoom is controlled, `initialZoom` is ignored.
+      return;
+    }
+    const rangeEntries = (params.initialZoom ?? []).filter(isInitialZoomRange);
+    if (rangeEntries.length === 0) {
+      return;
+    }
+    const {
+      axes: xAxes,
+      domains: xDomains
+    } = (0, _internals.selectorChartXAxisWithDomains)(store.state);
+    const {
+      axes: yAxes,
+      domains: yDomains
+    } = (0, _internals.selectorChartYAxisWithDomains)(store.state);
+    const resolvedZoom = new Map();
+    rangeEntries.forEach(entry => {
+      const xAxis = xAxes?.find(axis => axis.id === entry.axisId);
+      const axis = xAxis ?? yAxes?.find(candidate => candidate.id === entry.axisId);
+      if (!axis) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`MUI X Charts: \`initialZoom\` references the axis with id "${entry.axisId}", which does not exist.\n` + 'The range cannot be resolved. Provide an `axisId` that matches a chart axis.');
+        }
+        return;
+      }
+      const domain = (xAxis ? xDomains : yDomains)[entry.axisId]?.domain;
+      const domainParams = (0, _rangeButtonValueToZoom.getRangeButtonDomainParams)(axis, domain);
+      if (!domainParams) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = (0, _rangeButtonValueToZoom.rangeButtonValueToZoom)(entry.value, domainParams);
+      resolvedZoom.set(entry.axisId, {
+        axisId: entry.axisId,
+        start,
+        end
+      });
+    });
+    if (resolvedZoom.size === 0) {
+      return;
+    }
+    store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: store.state.zoom.zoomData.map(zoom => resolvedZoom.get(zoom.axisId) ?? zoom)
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, params.initialZoom, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
     const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
     if ((0, _isDeepEqual.isDeepEqual)(store.state.zoom.zoomData, newZoomData)) {
@@ -70,14 +140,12 @@ const useChartProZoom = pluginData => {
     onZoomChange(newZoomData);
     if (store.state.zoom.isControlled) {
       store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
-        isInteracting: true,
-        activeRangeButtonKey: null
+        isInteracting: true
       }));
     } else {
       store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
         isInteracting: true,
-        zoomData: newZoomData,
-        activeRangeButtonKey: null
+        zoomData: newZoomData
       }));
       removeIsInteracting();
     }
@@ -141,11 +209,6 @@ const useChartProZoom = pluginData => {
   }, [setZoomDataCallback, store]);
   const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
   const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
-  const setActiveRangeButtonKey = React.useCallback(key => {
-    store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
-      activeRangeButtonKey: key
-    }));
-  }, [store]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback,
@@ -158,8 +221,7 @@ const useChartProZoom = pluginData => {
       setAxisZoomData,
       moveZoomRange,
       zoomIn,
-      zoomOut,
-      setActiveRangeButtonKey
+      zoomOut
     }
   };
 };
@@ -178,16 +240,17 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = (0, _extends2.default)({}, (0, _internals.createZoomLookup)('x')(defaultizedXAxis), (0, _internals.createZoomLookup)('y')(defaultizedYAxis));
+  // Range-value entries of `initialZoom` are resolved after the first render, once the axis
+  // domains are computed. Only the explicit `ZoomData` entries are applied to the initial state.
   const userZoomData =
   // eslint-disable-next-line no-nested-ternary
-  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom.filter(entry => !isInitialZoomRange(entry)) : undefined;
   return {
     zoom: {
       zoomData: (0, _initializeZoomData.initializeZoomData)(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined,
-      zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(params.zoomInteractionConfig, optionsLookup),
-      activeRangeButtonKey: null
+      zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(params.zoomInteractionConfig, optionsLookup)
     }
   };
 };