@mui/x-charts-pro 8.7.0 → 8.9.0

package/esm/FunnelChart/seriesConfig/seriesProcessor.js

@@ -16,6 +16,14 @@ const createPoint = ({
   useBandWidth,
   stackOffset
 };
+const getFunnelDirection = (funnelDirection, curve, firstValue, lastValue) => {
+  if (curve !== 'step' && curve !== 'linear-sharp' && (funnelDirection === 'increasing' || funnelDirection === 'decreasing')) {
+    return funnelDirection;
+  }
+
+  // Implicit check for null or undefined values
+  return firstValue != null && lastValue != null && firstValue < lastValue ? 'increasing' : 'decreasing';
+};
 const seriesProcessor = params => {
   const {
     seriesOrder,
@@ -27,7 +35,7 @@ const seriesProcessor = params => {
     const currentSeries = series[seriesId];
     const firstDataPoint = currentSeries.data.at(0);
     const lastDataPoint = currentSeries.data.at(-1);
-    const dataDirection = firstDataPoint !== undefined && lastDataPoint !== undefined && firstDataPoint.value < lastDataPoint.value ? 'increasing' : 'decreasing';
+    const funnelDirection = getFunnelDirection(currentSeries.funnelDirection, currentSeries.curve, firstDataPoint?.value, lastDataPoint?.value);
     completedSeries[seriesId] = _extends({
       labelMarkType: 'square',
       layout: isHorizontal ? 'horizontal' : 'vertical',
@@ -36,7 +44,7 @@ const seriesProcessor = params => {
       data: currentSeries.data.map((v, i) => _extends({
         id: `${seriesId}-funnel-item-${v.id ?? i}`
       }, v)),
-      dataDirection,
+      funnelDirection,
       dataPoints: []
     });
     const stackOffsets = completedSeries[seriesId].data.toReversed().map((_, i, array) => array.slice(0, i).reduce((acc, item) => acc + item.value, 0)).toReversed();
@@ -44,54 +52,22 @@ const seriesProcessor = params => {
       // Main = main axis, Other = other axis
       // For horizontal layout, main is y, other is x
       // For vertical layout, main is x, other is y
-      const isIncreasing = completedSeries[seriesId].dataDirection === 'increasing';
-      const currentMaxMain = item.value;
-      const getNextDataIndex = () => {
-        if (isIncreasing) {
-          return dataIndex === 0 ? dataIndex : dataIndex - 1;
-        }
-        return dataIndex === array.length - 1 ? dataIndex : dataIndex + 1;
-      };
-      const nextDataIndex = getNextDataIndex();
-      const nextMaxMain = array[nextDataIndex].value ?? 0;
-      const nextMaxOther = 0;
-      const currentMaxOther = completedSeries[seriesId].data[dataIndex].value;
-      const stackOffset = stackOffsets[dataIndex];
+      const isIncreasing = completedSeries[seriesId].funnelDirection === 'increasing';
+      let currentMaxMain = 0;
+      let nextMaxMain = 0;
+      let nextDataIndex = 0;
       if (isIncreasing) {
-        return [
-        // Top right (vertical) or Top left (horizontal)
-        createPoint({
-          main: nextMaxMain,
-          other: nextMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: false,
-          stackOffset
-        }),
-        // Bottom right (vertical) or Top right (horizontal)
-        createPoint({
-          main: currentMaxMain,
-          other: currentMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: true,
-          stackOffset
-        }),
-        // Bottom left (vertical) or Bottom right (horizontal)
-        createPoint({
-          main: -currentMaxMain,
-          other: currentMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: true,
-          stackOffset
-        }),
-        // Top left (vertical) or Bottom left (horizontal)
-        createPoint({
-          main: -nextMaxMain,
-          other: nextMaxOther,
-          inverse: isHorizontal,
-          useBandWidth: false,
-          stackOffset
-        })];
+        nextDataIndex = dataIndex === 0 ? dataIndex : dataIndex - 1;
+        currentMaxMain = array[nextDataIndex].value ?? 0;
+        nextMaxMain = item.value;
+      } else {
+        nextDataIndex = dataIndex === array.length - 1 ? dataIndex : dataIndex + 1;
+        currentMaxMain = item.value;
+        nextMaxMain = array[nextDataIndex].value ?? 0;
       }
+      const stackOffset = stackOffsets[dataIndex];
+      const nextMaxOther = 0;
+      const currentMaxOther = completedSeries[seriesId].data[dataIndex].value;
       return [
       // Top right (vertical) or Top left (horizontal)
       createPoint({

package/esm/Heatmap/Heatmap.d.ts

@@ -27,7 +27,8 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
 export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -42,9 +43,9 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
   yAxis: Readonly<Omit<MakeOptional<YAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The series to display in the bar chart.
-   * An array of [[HeatmapSeriesType]] objects.
+   * An array of [[HeatmapSeries]] objects.
    */
-  series: Readonly<MakeOptional<HeatmapSeriesType, 'type'>[]>;
+  series: Readonly<HeatmapSeries[]>;
   /**
    * The configuration of the tooltip.
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.

package/esm/Heatmap/Heatmap.js

@@ -239,7 +239,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   onHighlightChange: PropTypes.func,
   /**
    * The series to display in the bar chart.
-   * An array of [[HeatmapSeriesType]] objects.
+   * An array of [[HeatmapSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/Heatmap/index.d.ts

@@ -1,4 +1,5 @@
 export { Heatmap } from "./Heatmap.js";
+export type { HeatmapSeries, HeatmapProps } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./heatmapClasses.js";

package/esm/LineChartPro/LineChartPro.js

@@ -131,6 +131,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.shape({
+    preferStrictDomainInLineCharts: PropTypes.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -146,6 +152,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: PropTypes.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -206,6 +220,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when a line element is clicked.
    */
@@ -222,7 +244,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   onZoomChange: PropTypes.func,
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -319,6 +341,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -384,6 +407,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -444,6 +468,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -504,6 +529,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -564,6 +590,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -624,6 +651,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -684,6 +712,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -744,6 +773,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -816,6 +846,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -880,6 +911,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -939,6 +971,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -998,6 +1031,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1057,6 +1091,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1116,6 +1151,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1175,6 +1211,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1234,6 +1271,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),

package/esm/PieChartPro/PieChartPro.d.ts

@@ -6,7 +6,7 @@ import { PieChartProPluginSignatures } from "./PieChartPro.plugins.js";
 import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 export interface PieChartProSlots extends Omit<PieChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface PieChartProSlotProps extends Omit<PieChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * Overridable component slots.
    * @default {}

package/esm/PieChartPro/PieChartPro.js

@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * The series to display in the pie chart.
-   * An array of [[PieSeriesType]] objects.
+   * An array of [[PieSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/RadarChartPro/RadarChartPro.d.ts

@@ -5,7 +5,7 @@ import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolb
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 export interface RadarChartProSlots extends Omit<RadarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface RadarChartProSlotProps extends Omit<RadarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * Overridable component slots.
    * @default {}

package/esm/RadarChartPro/RadarChartPro.js

@@ -127,12 +127,31 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * Callback fired when an area is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onAreaClick: PropTypes.func,
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onMarkClick: PropTypes.func,
   /**
    * The configuration of the radar scales.
    */
@@ -149,7 +168,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
   }).isRequired,
   /**
    * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
+   * An array of [[RadarSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/ScatterChartPro/ScatterChartPro.d.ts

@@ -6,7 +6,7 @@ import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
 import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
 export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps'> {
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
   /**
    * Overridable component slots.
    * @default {}

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -211,7 +211,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   onZoomChange: PropTypes.func,
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -313,6 +313,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -378,6 +379,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -438,6 +440,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -498,6 +501,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -558,6 +562,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -618,6 +623,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -678,6 +684,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -738,6 +745,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -810,6 +818,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -874,6 +883,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -933,6 +943,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -992,6 +1003,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1051,6 +1063,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1110,6 +1123,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1169,6 +1183,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1228,6 +1243,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),

package/esm/index.js

@@ -1,8 +1,8 @@
 /**
- * @mui/x-charts-pro v8.7.0
+ * @mui/x-charts-pro v8.9.0
  *
- * @license MUI X Commercial
- * This source code is licensed under the commercial license found in the
+ * @license SEE LICENSE IN LICENSE
+ * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import "./typeOverloads/modules.js";

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

@@ -15,7 +15,9 @@ export async function exportImage(element, params) {
   const {
     fileName,
     type = 'image/png',
-    quality = 0.9
+    quality = 0.9,
+    onBeforeExport,
+    copyStyles = true
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const {
@@ -43,11 +45,15 @@ export async function exportImage(element, params) {
     exportDoc.body.style.margin = '0px';
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
-    await Promise.all(loadStyleSheets(exportDoc, root));
+    if (copyStyles) {
+      await Promise.all(loadStyleSheets(exportDoc, root));
+    }
     resolve();
   };
   doc.body.appendChild(iframe);
-  const [drawDocument] = await Promise.all([drawDocumentPromise, iframeLoadPromise]);
+  await iframeLoadPromise;
+  await onBeforeExport?.(iframe);
+  const drawDocument = await drawDocumentPromise;
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71

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

@@ -1,4 +1,6 @@
 import { ChartPrintExportOptions } from "./useChartProExport.types.js";
 export declare function printChart(element: HTMLElement | SVGElement, {
-  fileName
+  fileName,
+  onBeforeExport,
+  copyStyles
 }?: ChartPrintExportOptions): void;

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

@@ -2,7 +2,9 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
 import { createExportIframe } from "./common.js";
 export function printChart(element, {
-  fileName
+  fileName,
+  onBeforeExport,
+  copyStyles = true
 } = {}) {
   const printWindow = createExportIframe(fileName);
   const doc = ownerDocument(element);
@@ -14,7 +16,9 @@ export function printChart(element, {
     printDoc.body.innerHTML = container.innerHTML;
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
-    await Promise.all(loadStyleSheets(printDoc, root));
+    if (copyStyles) {
+      await Promise.all(loadStyleSheets(printDoc, root));
+    }
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;
@@ -22,6 +26,7 @@ export function printChart(element, {
         doc.body.removeChild(printWindow);
       }
     });
+    await onBeforeExport?.(printWindow);
     printWindow.contentWindow.print();
   };
   doc.body.appendChild(printWindow);

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

@@ -4,29 +4,39 @@ export type UseChartProExportDefaultizedParameters = UseChartProExportParameters
 export interface UseChartProExportState {
   export: {};
 }
-/**
- * The options to apply on the Print export.
- * @demos
- *   - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
- */
-export interface ChartPrintExportOptions {
+export interface ChartExportOptions {
   /**
    * The name of the file without the extension.
    * @default The title of the document the chart belongs to
    */
   fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @param {HTMLIFrameElement} iframe containing the chart to be exported.
+   * @returns {Promise<void> | void} A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => Promise<void> | void;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
 }
+/**
+ * The options to apply on the Print export.
+ * @demos
+ *   - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+ */
+export interface ChartPrintExportOptions extends ChartExportOptions {}
 /**
  * The options to apply on the image export.
  * @demos
  *   - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
  */
-export interface ChartImageExportOptions {
-  /**
-   * The name of the file without the extension.
-   * @default The title of the document the chart belongs to
-   */
-  fileName?: string;
+export interface ChartImageExportOptions extends ChartExportOptions {
   /**
    * The format of the image to be exported.
    * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.