@mui/x-charts-pro 8.1.0 → 8.3.0

package/esm/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,4 @@
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -6,6 +6,10 @@ export interface FunnelSectionClasses {
   highlighted: string;
   /** Styles applied to the root element if `faded={true}`. */
   faded: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
   /** Styles applied to the label element. */
   label: string;
   /**
@@ -14,5 +18,5 @@ export interface FunnelSectionClasses {
    */
   series: string;
 }
-export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "highlighted" | "faded" | "root", string>;
+export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/esm/FunnelChart/funnelSectionClasses.js

@@ -7,14 +7,17 @@ function getFunnelSectionUtilityClass(slot) {
 export const useUtilityClasses = props => {
   const {
     classes,
-    seriesId
+    seriesId,
+    variant
   } = props;
   const slots = {
     root: ['root', `series-${seriesId}`],
     highlighted: ['highlighted'],
     faded: ['faded'],
+    outlined: variant === 'outlined' ? ['outlined'] : [],
+    filled: variant === 'filled' ? ['filled'] : [],
     label: ['label']
   };
   return composeClasses(slots, getFunnelSectionUtilityClass, classes);
 };
-export const funnelSectionClasses = generateUtilityClasses('MuiFunnelSection', ['root', 'highlighted', 'faded', 'label', 'series']);
+export const funnelSectionClasses = generateUtilityClasses('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series']);

package/esm/FunnelChart/index.d.ts

@@ -1,8 +1,9 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from './FunnelChart';
+export type { FunnelChartProps } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
+export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from './funnelSectionClasses';
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";

package/esm/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -3,6 +3,7 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
   return _extends({
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
+    borderRadius: seriesData.borderRadius ?? 8,
     data: seriesData.data.map((d, index) => _extends({
       color: colors[index % colors.length]
     }, d))

package/esm/FunnelChart/useFunnelChartProps.d.ts

@@ -1,11 +1,10 @@
 import { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
-import { ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { FunnelPlotProps } from "./FunnelPlot.js";
-import type { FunnelChartProps } from './FunnelChart';
+import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props
@@ -20,10 +19,6 @@ export declare const useFunnelChartProps: (props: FunnelChartProps) => {
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;
   legendProps: ChartsLegendSlotExtension;
-  clipPathGroupProps: {
-    clipPath: string;
-  };
-  clipPathProps: ChartsClipPathProps;
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   axisHighlightProps: ChartsAxisHighlightProps;
   children: import("react").ReactNode;

package/esm/FunnelChart/useFunnelChartProps.js

@@ -2,11 +2,11 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
-import useId from '@mui/utils/useId';
 import { defaultizeMargin } from '@mui/x-charts/internals';
 import { warnOnce } from '@mui/x-internals/warning';
+import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -14,7 +14,7 @@ function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
   if (process.env.NODE_ENV !== 'production') {
     if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
-      warnOnce([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+      warnOnce([`MUI X Charts: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
     }
   }
   const side = isHorizontal ? 'bottom' : 'left';
@@ -84,12 +84,11 @@ export const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef
+      apiRef,
+      gap
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
   const isHorizontal = series.some(s => s.layout === 'horizontal');
   const valueAxisConfig = {
     id: isHorizontal ? DEFAULT_Y_AXIS_KEY : DEFAULT_X_AXIS_KEY,
@@ -107,7 +106,7 @@ export const useFunnelChartProps = props => {
     width,
     height,
     margin,
-    colors,
+    colors: colors ?? strawberrySkyPalette,
     xAxis: [xAxis],
     yAxis: [yAxis],
     sx,
@@ -117,6 +116,7 @@ export const useFunnelChartProps = props => {
     apiRef
   });
   const funnelPlotProps = {
+    gap,
     onItemClick,
     slots,
     slotProps
@@ -134,12 +134,6 @@ export const useFunnelChartProps = props => {
     slots,
     slotProps
   };
-  const clipPathGroupProps = {
-    clipPath: `url(#${clipPathId})`
-  };
-  const clipPathProps = {
-    id: clipPathId
-  };
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
@@ -152,8 +146,6 @@ export const useFunnelChartProps = props => {
     overlayProps,
     chartsAxisProps,
     legendProps,
-    clipPathGroupProps,
-    clipPathProps,
     chartsWrapperProps,
     axisHighlightProps,
     children

package/esm/Heatmap/Heatmap.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
-import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps, AxisConfig } from '@mui/x-charts/internals';
+import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
@@ -25,13 +25,13 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[]>;
+  xAxis: Readonly<Omit<MakeOptional<XAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[]>;
+  yAxis: Readonly<Omit<MakeOptional<YAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeriesType]] objects.

package/esm/Heatmap/Heatmap.js

@@ -187,7 +187,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * 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 | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**
@@ -285,16 +285,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func,
-    zoom: PropTypes.oneOfType([PropTypes.shape({
-      filterMode: PropTypes.oneOf(['discard', 'keep']),
-      maxEnd: PropTypes.number,
-      maxSpan: PropTypes.number,
-      minSpan: PropTypes.number,
-      minStart: PropTypes.number,
-      panning: PropTypes.bool,
-      step: PropTypes.number
-    }), PropTypes.bool])
+    valueFormatter: PropTypes.func
   })).isRequired,
   /**
    * The configuration of the y-axes.
@@ -352,16 +343,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number,
-    zoom: PropTypes.oneOfType([PropTypes.shape({
-      filterMode: PropTypes.oneOf(['discard', 'keep']),
-      maxEnd: PropTypes.number,
-      maxSpan: PropTypes.number,
-      minSpan: PropTypes.number,
-      minStart: PropTypes.number,
-      panning: PropTypes.bool,
-      step: PropTypes.number
-    }), PropTypes.bool])
+    width: PropTypes.number
   })).isRequired,
   /**
    * The configuration of the z-axes.

package/esm/LineChartPro/LineChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { LineChartProps } from '@mui/x-charts/LineChart';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *

package/esm/LineChartPro/LineChartPro.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -16,6 +16,8 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { useLineChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 import { LINE_CHART_PRO_PLUGINS } from "./LineChartPro.plugins.js";
@@ -39,7 +41,8 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -71,10 +74,10 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -89,6 +92,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
@@ -190,7 +194,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * 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 | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**
@@ -218,6 +222,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * An array of [[LineSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * @default false
@@ -305,6 +314,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -365,6 +377,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -420,6 +435,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -475,6 +493,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -530,6 +551,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -585,6 +609,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -640,6 +667,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -695,6 +725,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),
@@ -762,6 +795,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -821,6 +857,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -875,6 +914,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -929,6 +971,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -983,6 +1028,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1037,6 +1085,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1091,6 +1142,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1145,6 +1199,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),

package/esm/ScatterChartPro/ScatterChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {}
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *