@mui/x-charts-pro 9.0.0-alpha.2 → 9.0.0-alpha.4

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v9.0.0-alpha.2
+ * @mui/x-charts-pro v9.0.0-alpha.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -11,15 +11,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ChartsContainerPro: true,
-  ChartContainerPro: true
+  ChartsContainerPro: true
 };
-Object.defineProperty(exports, "ChartContainerPro", {
-  enumerable: true,
-  get: function () {
-    return _ChartContainerPro.ChartContainerPro;
-  }
-});
 Object.defineProperty(exports, "ChartsContainerPro", {
   enumerable: true,
   get: function () {
@@ -267,18 +260,6 @@ Object.keys(_ChartsDataProvider).forEach(function (key) {
     }
   });
 });
-var _ChartDataProvider = require("@mui/x-charts/ChartDataProvider");
-Object.keys(_ChartDataProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProvider[key];
-    }
-  });
-});
 var _ChartsLabel = require("@mui/x-charts/ChartsLabel");
 Object.keys(_ChartsLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -400,7 +381,6 @@ Object.keys(_Heatmap).forEach(function (key) {
   });
 });
 var _ChartsContainerPro = require("./ChartsContainerPro");
-var _ChartContainerPro = require("./ChartContainerPro");
 var _ChartsDataProviderPro = require("./ChartsDataProviderPro");
 Object.keys(_ChartsDataProviderPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -413,18 +393,6 @@ Object.keys(_ChartsDataProviderPro).forEach(function (key) {
     }
   });
 });
-var _ChartDataProviderPro = require("./ChartDataProviderPro");
-Object.keys(_ChartDataProviderPro).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartDataProviderPro[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProviderPro[key];
-    }
-  });
-});
 var _ScatterChartPro = require("./ScatterChartPro");
 Object.keys(_ScatterChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v9.0.0-alpha.2
+ * @mui/x-charts-pro v9.0.0-alpha.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -28,7 +28,6 @@ export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartsDataProvider';
-export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts/ChartsOverlay';
 export * from '@mui/x-charts/ChartsWrapper';
@@ -46,9 +45,7 @@ export * from "./colorPalettes/index.mjs";
 // Pro components
 export * from "./Heatmap/index.mjs";
 export { ChartsContainerPro } from "./ChartsContainerPro/index.mjs";
-export { ChartContainerPro } from "./ChartContainerPro/index.mjs";
 export * from "./ChartsDataProviderPro/index.mjs";
-export * from "./ChartDataProviderPro/index.mjs";
 export * from "./ScatterChartPro/index.mjs";
 export * from "./SankeyChart/index.mjs";
 export * from "./BarChartPro/index.mjs";

package/internals/ChartsWatermark.d.mts

@@ -1,6 +1,6 @@
-import type { MuiCommercialPackageName } from '@mui/x-license/utils';
+import { type CommercialPackageInfo } from '@mui/x-license/internals';
 interface ChartsWatermarkProps {
-  packageName: MuiCommercialPackageName;
+  packageInfo: CommercialPackageInfo;
 }
 export declare function ChartsWatermark(props: ChartsWatermarkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/internals/ChartsWatermark.d.ts

@@ -1,6 +1,6 @@
-import type { MuiCommercialPackageName } from '@mui/x-license/utils';
+import { type CommercialPackageInfo } from '@mui/x-license/internals';
 interface ChartsWatermarkProps {
-  packageName: MuiCommercialPackageName;
+  packageInfo: CommercialPackageInfo;
 }
 export declare function ChartsWatermark(props: ChartsWatermarkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/internals/ChartsWatermark.js

@@ -8,20 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsWatermark = ChartsWatermark;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _Watermark = require("@mui/x-license/Watermark");
+var _internals = require("@mui/x-license/internals");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
 function ChartsWatermark(props) {
   const layerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
   if (!layerContainerRef.current) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
-      packageName: props.packageName,
-      releaseInfo: releaseInfo
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.Watermark, {
+      packageInfo: props.packageInfo
     });
   }
-  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
-    packageName: props.packageName,
-    releaseInfo: releaseInfo
+  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.Watermark, {
+    packageInfo: props.packageInfo
   }), layerContainerRef.current);
 }

package/internals/ChartsWatermark.mjs

@@ -2,20 +2,17 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Watermark } from '@mui/x-license/Watermark';
+import { Watermark } from '@mui/x-license/internals';
 import { useChartsLayerContainerRef } from "../hooks/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
 export function ChartsWatermark(props) {
   const layerContainerRef = useChartsLayerContainerRef();
   if (!layerContainerRef.current) {
     return /*#__PURE__*/_jsx(Watermark, {
-      packageName: props.packageName,
-      releaseInfo: releaseInfo
+      packageInfo: props.packageInfo
     });
   }
   return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(Watermark, {
-    packageName: props.packageName,
-    releaseInfo: releaseInfo
+    packageInfo: props.packageInfo
   }), layerContainerRef.current);
 }

package/internals/index.d.mts

@@ -1,6 +1,5 @@
 export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
 export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
-export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.mjs";
 export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.mjs";
 export type { PreviewPlotProps } from "../ChartsZoomSlider/internals/previews/PreviewPlot.types.mjs";

package/internals/index.d.ts

@@ -1,6 +1,5 @@
 export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
-export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
 export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.js";
 export type { PreviewPlotProps } from "../ChartsZoomSlider/internals/previews/PreviewPlot.types.js";

package/internals/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   useChartsContainerProProps: true,
-  useChartContainerProProps: true,
   seriesPreviewPlotMap: true,
   defaultSeriesConfigPro: true,
   useHeatmapProps: true,
@@ -36,12 +35,6 @@ Object.defineProperty(exports, "seriesPreviewPlotMap", {
     return _seriesPreviewPlotMap.seriesPreviewPlotMap;
   }
 });
-Object.defineProperty(exports, "useChartContainerProProps", {
-  enumerable: true,
-  get: function () {
-    return _useChartContainerProProps.useChartContainerProProps;
-  }
-});
 Object.defineProperty(exports, "useChartsContainerProProps", {
   enumerable: true,
   get: function () {
@@ -55,7 +48,6 @@ Object.defineProperty(exports, "useHeatmapProps", {
   }
 });
 var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
-var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _seriesPreviewPlotMap = require("../ChartsZoomSlider/internals/seriesPreviewPlotMap");
 var _ChartsDataProviderPro = require("../ChartsDataProviderPro/ChartsDataProviderPro");
 var _useHeatmapProps = require("../Heatmap/useHeatmapProps");

package/internals/index.mjs

@@ -1,5 +1,4 @@
 export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
-export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
 export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.mjs";
 export { defaultSeriesConfigPro } from "../ChartsDataProviderPro/ChartsDataProviderPro.mjs";
 export { useHeatmapProps } from "../Heatmap/useHeatmapProps.mjs";

package/internals/plugins/allPlugins.d.mts

@@ -1,9 +1,9 @@
 import { type ChartSeriesType, type ConvertSignaturesIntoPlugins, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartZAxisSignature, type UseChartHighlightSignature, type UseChartPolarAxisSignature, type UseChartBrushSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "./useChartProExport/index.mjs";
 import { type UseChartProZoomSignature } from "./useChartProZoom/index.mjs";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<TSeries>, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature<TSeries>, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<TSeries>];
-export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
+export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<SeriesType>];
+export type AllPluginsType<SeriesType extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<SeriesType>>;
 export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartVisibilityManagerSignature<any>>)[];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<TSeries>, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature<TSeries>, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<TSeries>];
-export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
+export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<SeriesType>];
+export type DefaultPluginsType<SeriesType extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<SeriesType>>;
 export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartVisibilityManagerSignature<any>>)[];

package/internals/plugins/allPlugins.d.ts

@@ -1,9 +1,9 @@
 import { type ChartSeriesType, type ConvertSignaturesIntoPlugins, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartZAxisSignature, type UseChartHighlightSignature, type UseChartPolarAxisSignature, type UseChartBrushSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "./useChartProExport/index.js";
 import { type UseChartProZoomSignature } from "./useChartProZoom/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<TSeries>, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature<TSeries>, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<TSeries>];
-export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
+export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<SeriesType>];
+export type AllPluginsType<SeriesType extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<SeriesType>>;
 export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartVisibilityManagerSignature<any>>)[];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<TSeries>, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature<TSeries>, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<TSeries>];
-export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
+export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartProZoomSignature, UseChartProExportSignature, UseChartVisibilityManagerSignature<SeriesType>];
+export type DefaultPluginsType<SeriesType extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<SeriesType>>;
 export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartVisibilityManagerSignature<any>>)[];

package/internals/plugins/useChartProExport/common.js

@@ -41,14 +41,10 @@ function copyCanvasesContent(original, clone) {
         const dataURL = originalCanvas.toDataURL();
         const img = cloneCanvas.ownerDocument.createElement('img');
         img.src = dataURL;
-        img.width = cloneCanvas.width;
-        img.height = cloneCanvas.height;
-        for (const styleKey in cloneCanvas.style) {
-          if (!Object.hasOwn(img.style, styleKey) || !Object.hasOwn(cloneCanvas.style, styleKey)) {
-            continue;
-          }
-          img.style[styleKey] = cloneCanvas.style[styleKey];
-        }
+        // Use the CSS dimensions (not canvas.width/height which are in device pixels)
+        img.width = originalCanvas.clientWidth;
+        img.height = originalCanvas.clientHeight;
+        img.style.cssText = cloneCanvas.style.cssText;
         cloneCanvas.replaceWith(img);
         img.onload = () => {
           resolve();

package/internals/plugins/useChartProExport/common.mjs

@@ -33,14 +33,10 @@ export function copyCanvasesContent(original, clone) {
         const dataURL = originalCanvas.toDataURL();
         const img = cloneCanvas.ownerDocument.createElement('img');
         img.src = dataURL;
-        img.width = cloneCanvas.width;
-        img.height = cloneCanvas.height;
-        for (const styleKey in cloneCanvas.style) {
-          if (!Object.hasOwn(img.style, styleKey) || !Object.hasOwn(cloneCanvas.style, styleKey)) {
-            continue;
-          }
-          img.style[styleKey] = cloneCanvas.style[styleKey];
-        }
+        // Use the CSS dimensions (not canvas.width/height which are in device pixels)
+        img.width = originalCanvas.clientWidth;
+        img.height = originalCanvas.clientHeight;
+        img.style.cssText = cloneCanvas.style.cssText;
         cloneCanvas.replaceWith(img);
         img.onload = () => {
           resolve();

package/internals/plugins/useChartProExport/exportImage.js

@@ -34,6 +34,7 @@ async function exportImage(element, svg, params) {
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = (0, _ownerDocument.default)(element);
+  const ratio = 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
@@ -74,7 +75,6 @@ async function exportImage(element, svg, params) {
   /* 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`;

package/internals/plugins/useChartProExport/exportImage.mjs

@@ -24,6 +24,7 @@ export async function exportImage(element, svg, params) {
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = ownerDocument(element);
+  const ratio = 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
@@ -64,7 +65,6 @@ export async function exportImage(element, svg, params) {
   /* 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`;

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.mts

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -22,8 +22,23 @@ const useZoomOnBrush = ({
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'brush');
   const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
-    instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    if ('setZoomBrushEnabled' in instance) {
+      instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    }
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.mjs

@@ -16,8 +16,23 @@ export const useZoomOnBrush = ({
   const config = store.use(selectorZoomInteractionConfig, 'brush');
   const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
-    instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    if ('setZoomBrushEnabled' in instance) {
+      instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    }
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {

package/models/seriesType/heatmap.d.mts

@@ -1,10 +1,11 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter' | 'valueFormatter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
-   * Data associated to each bar.
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
    */
   data?: readonly HeatmapValueType[];
   /**
@@ -15,9 +16,21 @@ export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueTyp
    * The label to display on the tooltip or the legend. It can be a string or a function.
    */
   label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @param {number | null} value The series' value to render. Can be `null` if the cell doesn't contain any value.
+   * @param {{ xIndex: number; yIndex: number}} context The rendering context of the value.
+   * @param {number} context.xIndex The x index of the cell the value belongs to.
+   * @param {number} context.yIndex The y index of the cell the value belongs to.
+   * @returns {string | null} The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (value: number | null, context: {
+    xIndex: number;
+    yIndex: number;
+  }) => string | null;
 }
 /**
- * An object that allows to identify a single bar.
+ * An object that allows to identify a single cell.
  * Used for item interaction
  */
 export type HeatmapItemIdentifier = {
@@ -26,11 +39,6 @@ export type HeatmapItemIdentifier = {
    * The id of the series the cell belongs to.
    */
   seriesId: DefaultizedHeatmapSeriesType['id'];
-  /**
-   * The data index of the cell.
-   * Is defined only if some data is associated to the cell.
-   */
-  dataIndex?: number;
   /**
    * The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data.
    */
@@ -40,4 +48,23 @@ export type HeatmapItemIdentifier = {
    */
   yIndex: number;
 };
-export interface DefaultizedHeatmapSeriesType extends DefaultizedProps<HeatmapSeriesType, CommonDefaultizedProps> {}
+/**
+ * The cell identifier with the associated data value.
+ */
+export type HeatmapItemIdentifierWithData = HeatmapItemIdentifier & {
+  /**
+   * The value of the cell. Null if there is no data associated.
+   */
+  value: number | null;
+};
+export declare class HeatmapData {
+  private valueLookup;
+  constructor(data: readonly HeatmapValueType[]);
+  getValue(xIndex: number, yIndex: number): number | null;
+}
+export interface DefaultizedHeatmapSeriesType extends DefaultizedProps<HeatmapSeriesType, CommonDefaultizedProps> {
+  /**
+   * Maps the `xIndex` and `yIndex` to the corresponding value of the cell.
+   */
+  heatmapData: HeatmapData;
+}

package/models/seriesType/heatmap.d.ts

@@ -1,10 +1,11 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter' | 'valueFormatter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
-   * Data associated to each bar.
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
    */
   data?: readonly HeatmapValueType[];
   /**
@@ -15,9 +16,21 @@ export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueTyp
    * The label to display on the tooltip or the legend. It can be a string or a function.
    */
   label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @param {number | null} value The series' value to render. Can be `null` if the cell doesn't contain any value.
+   * @param {{ xIndex: number; yIndex: number}} context The rendering context of the value.
+   * @param {number} context.xIndex The x index of the cell the value belongs to.
+   * @param {number} context.yIndex The y index of the cell the value belongs to.
+   * @returns {string | null} The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (value: number | null, context: {
+    xIndex: number;
+    yIndex: number;
+  }) => string | null;
 }
 /**
- * An object that allows to identify a single bar.
+ * An object that allows to identify a single cell.
  * Used for item interaction
  */
 export type HeatmapItemIdentifier = {
@@ -26,11 +39,6 @@ export type HeatmapItemIdentifier = {
    * The id of the series the cell belongs to.
    */
   seriesId: DefaultizedHeatmapSeriesType['id'];
-  /**
-   * The data index of the cell.
-   * Is defined only if some data is associated to the cell.
-   */
-  dataIndex?: number;
   /**
    * The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data.
    */
@@ -40,4 +48,23 @@ export type HeatmapItemIdentifier = {
    */
   yIndex: number;
 };
-export interface DefaultizedHeatmapSeriesType extends DefaultizedProps<HeatmapSeriesType, CommonDefaultizedProps> {}
+/**
+ * The cell identifier with the associated data value.
+ */
+export type HeatmapItemIdentifierWithData = HeatmapItemIdentifier & {
+  /**
+   * The value of the cell. Null if there is no data associated.
+   */
+  value: number | null;
+};
+export declare class HeatmapData {
+  private valueLookup;
+  constructor(data: readonly HeatmapValueType[]);
+  getValue(xIndex: number, yIndex: number): number | null;
+}
+export interface DefaultizedHeatmapSeriesType extends DefaultizedProps<HeatmapSeriesType, CommonDefaultizedProps> {
+  /**
+   * Maps the `xIndex` and `yIndex` to the corresponding value of the cell.
+   */
+  heatmapData: HeatmapData;
+}

package/models/seriesType/heatmap.js

@@ -2,4 +2,31 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.HeatmapData = void 0;
+/**
+ * An object that allows to identify a single cell.
+ * Used for item interaction
+ */
+
+/**
+ * The cell identifier with the associated data value.
+ */
+
+class HeatmapData {
+  constructor(data) {
+    this.valueLookup = new Map();
+    for (const [xIndex, yIndex, value] of data) {
+      let column = this.valueLookup.get(xIndex);
+      if (!column) {
+        column = new Map();
+        this.valueLookup.set(xIndex, column);
+      }
+      column.set(yIndex, value);
+    }
+  }
+  getValue(xIndex, yIndex) {
+    return this.valueLookup.get(xIndex)?.get(yIndex) ?? null;
+  }
+}
+exports.HeatmapData = HeatmapData;

package/models/seriesType/heatmap.mjs

@@ -1 +1,25 @@
-export {};
+/**
+ * An object that allows to identify a single cell.
+ * Used for item interaction
+ */
+
+/**
+ * The cell identifier with the associated data value.
+ */
+
+export class HeatmapData {
+  constructor(data) {
+    this.valueLookup = new Map();
+    for (const [xIndex, yIndex, value] of data) {
+      let column = this.valueLookup.get(xIndex);
+      if (!column) {
+        column = new Map();
+        this.valueLookup.set(xIndex, column);
+      }
+      column.set(yIndex, value);
+    }
+  }
+  getValue(xIndex, yIndex) {
+    return this.valueLookup.get(xIndex)?.get(yIndex) ?? null;
+  }
+}