@mui/x-charts-pro 8.7.0 → 8.8.0

package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useSelector, useStore, useScatterPlotData, scatterSeriesConfig, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useScatterSeriesContext, useXAxes, useYAxes, useZAxes } from '@mui/x-charts/hooks';
+import { ScatterMarker } from '@mui/x-charts/ScatterChart';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ScatterPreviewPlot({
+  axisId,
+  x,
+  y,
+  height,
+  width
+}) {
+  const store = useStore();
+  const seriesData = useScatterSeriesContext();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const {
+    zAxis: zAxes,
+    zAxisIds
+  } = useZAxes();
+  const defaultZAxisId = zAxisIds[0];
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    seriesOrder
+  } = seriesData;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: seriesOrder.map(seriesId => {
+      const {
+        id,
+        xAxisId,
+        yAxisId,
+        zAxisId,
+        color
+      } = series[seriesId];
+      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxes[xAxisId ?? defaultXAxisId], yAxes[yAxisId ?? defaultYAxisId], zAxes[zAxisId ?? defaultZAxisId]);
+      const xScale = xAxes[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxes[yAxisId ?? defaultYAxisId].scale;
+      return /*#__PURE__*/_jsx(ScatterPreviewItems, {
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        colorGetter: colorGetter,
+        series: series[seriesId],
+        x: x,
+        y: y,
+        height: height,
+        width: width
+      }, id);
+    })
+  });
+}
+function ScatterPreviewItems(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const isPointInside = React.useCallback((px, py) => px >= x && px <= x + width && py >= y && py <= y + height, [height, width, x, y]);
+  const scatterPlotData = useScatterPlotData(series, xScale, yScale, isPointInside);
+  return /*#__PURE__*/_jsx("g", {
+    "data-series": series.id,
+    children: scatterPlotData.map((dataPoint, i) => {
+      return /*#__PURE__*/_jsx(ScatterMarker, {
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        seriesId: series.id,
+        size: series.preview.markerSize,
+        isHighlighted: false,
+        isFaded: false
+      }, dataPoint.id ?? dataPoint.dataIndex);
+    })
+  });
+}

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -56,7 +56,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
    */
   options: PropTypes.shape({
+    copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   }),

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -56,7 +56,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
    */
   options: PropTypes.shape({
-    fileName: PropTypes.string
+    copyStyles: PropTypes.bool,
+    fileName: PropTypes.string,
+    onBeforeExport: PropTypes.func
   }),
   /**
    * A function to customize the rendering of the component.

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -151,7 +151,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   imageExportOptions: PropTypes.arrayOf(PropTypes.shape({
+    copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   })),

package/esm/FunnelChart/FunnelChart.d.ts

@@ -8,7 +8,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { FunnelChartSlotExtension } from "./funnelSlots.types.js";
 import { CategoryAxis } from "./categoryAxis.types.js";
 import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeriesType]] objects.

package/esm/FunnelChart/FunnelPlot.js

@@ -86,7 +86,7 @@ const useAggregatedData = () => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
-        const isIncreasing = currentSeries.dataDirection === 'increasing';
+        const isIncreasing = currentSeries.funnelDirection === 'increasing';
         const curve = getFunnelCurve(currentSeries.curve, {
           isHorizontal,
           gap,

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

@@ -16,7 +16,7 @@ export type FunnelValueType = {
   /**
    * The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
    */
-  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string);
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
   /**
    * The color of the funnel section
    */
@@ -78,6 +78,17 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    * @default 'filled'
    */
   variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   *
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
 }
 /**
  * An object that allows to identify a funnel item.
@@ -108,16 +119,10 @@ export type FunnelItem = {
    */
   value: number;
 };
-export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
+export interface DefaultizedFunnelSeriesType extends Omit<DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'>, 'funnelDirection'> {
   dataPoints: FunnelDataPoints[][];
   data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
-  /**
-   * Denotes if the data is increasing, first data point is less than the last data point.
-   * While the data is decreasing if the first data point is greater than the last data point.
-   *
-   * This is used to determine the direction of the funnel.
-   */
-  dataDirection: 'increasing' | 'decreasing';
+  funnelDirection: 'increasing' | 'decreasing';
 }
 export type FunnelDataPoints = Record<'x' | 'y', number> & {
   useBandWidth: boolean;

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { ChartPluginSignature, UseChartCartesianAxisDefaultizedParameters, UseChartCartesianAxisParameters, UseChartCartesianAxisState, UseChartInteractionSignature, UseChartSeriesSignature, ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts

@@ -3,7 +3,7 @@ import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
   funnel: {
     gap: number;
   };
@@ -12,7 +12,7 @@ export declare const selectorFunnelGap: import("reselect").Selector<import("@mui
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -33,7 +33,7 @@ export declare const selectorChartXAxis: import("reselect").Selector<import("@mu
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

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,7 @@ 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 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.

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.
    */
@@ -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/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/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 {}