@mui/x-charts-pro 8.7.0 → 8.9.0

package/RadarChartPro/RadarChartPro.js

@@ -135,12 +135,31 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.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.default.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.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.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.default.func,
   /**
    * The configuration of the radar scales.
    */
@@ -157,7 +176,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.default.arrayOf(_propTypes.default.object).isRequired,
   /**

package/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/ScatterChartPro/ScatterChartPro.js

@@ -218,7 +218,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   onZoomChange: _propTypes.default.func,
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
@@ -320,6 +320,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -385,6 +386,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -445,6 +447,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -505,6 +508,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -565,6 +569,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -625,6 +630,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -685,6 +691,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -745,6 +752,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -817,6 +825,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -881,6 +890,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -940,6 +950,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -999,6 +1010,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1058,6 +1070,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1117,6 +1130,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1176,6 +1190,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1235,6 +1250,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),

package/esm/BarChartPro/BarChartPro.d.ts

@@ -6,7 +6,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
 export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * Overridable component slots.
    * @default {}

package/esm/BarChartPro/BarChartPro.js

@@ -150,6 +150,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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.
@@ -211,6 +219,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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 bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
@@ -225,7 +241,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   onZoomChange: PropTypes.func,
   /**
    * The series to display in the bar chart.
-   * An array of [[BarSeriesType]] objects.
+   * An array of [[BarSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -322,6 +338,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -387,6 +404,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -447,6 +465,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -507,6 +526,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -567,6 +587,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -627,6 +648,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -687,6 +709,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -747,6 +770,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -819,6 +843,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -883,6 +908,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -942,6 +968,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1001,6 +1028,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1060,6 +1088,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1119,6 +1148,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1178,6 +1208,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1237,6 +1268,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        preview: PropTypes.bool,
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1MTU4MDAwMDAwMA==";
+const releaseInfo = "MTc1Mjc4OTYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -83,6 +83,12 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.shape({
+    preferStrictDomainInLineCharts: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, useDrawingArea, useSelector, useStore, ZOOM_SLIDER_MARGIN } from '@mui/x-charts/internals';
+import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useSelector, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
-import { ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.js";
+import { ChartAxisZoomSliderPreview } from "./ChartAxisZoomSliderPreview.js";
+import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.js";
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
 import { ChartAxisZoomSliderTrack } from "./ChartAxisZoomSliderTrack.js";
 import { ChartAxisZoomSliderActiveTrack } from "./ChartAxisZoomSliderActiveTrack.js";
@@ -19,6 +20,7 @@ export function ChartAxisZoomSlider({
   const store = useStore();
   const drawingArea = useDrawingArea();
   const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis
@@ -26,6 +28,7 @@ export function ChartAxisZoomSlider({
   const {
     yAxis
   } = useYAxes();
+  const showPreview = zoomOptions.slider.preview;
   if (!zoomData) {
     return null;
   }
@@ -34,6 +37,7 @@ export function ChartAxisZoomSlider({
   let reverse;
   let axisPosition;
   let tooltipConditions;
+  const sliderSize = showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : ZOOM_SLIDER_SIZE;
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
     if (!axis || axis.position === 'none') {
@@ -41,7 +45,7 @@ export function ChartAxisZoomSlider({
     }
     const axisSize = axis.height;
     x = drawingArea.left;
-    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
+    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - sliderSize - ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'bottom';
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
@@ -51,38 +55,49 @@ export function ChartAxisZoomSlider({
       return null;
     }
     const axisSize = axis.width;
-    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
+    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - sliderSize - ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'left';
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
   }
-  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const backgroundRectOffset = (sliderSize - ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const track = showPreview ? /*#__PURE__*/_jsx(ChartAxisZoomSliderPreview, {
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    x: 0,
+    y: 0,
+    height: axisDirection === 'x' ? ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_PREVIEW_SIZE
+  }) : /*#__PURE__*/_jsx(ChartAxisZoomSliderTrack, {
+    x: axisDirection === 'x' ? 0 : backgroundRectOffset,
+    y: axisDirection === 'x' ? backgroundRectOffset : 0,
+    height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_TRACK_SIZE,
+    rx: ZOOM_SLIDER_TRACK_SIZE / 2,
+    ry: ZOOM_SLIDER_TRACK_SIZE / 2,
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
+    onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+  });
   return /*#__PURE__*/_jsxs("g", {
     "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
     style: {
       touchAction: 'none'
     },
-    children: [/*#__PURE__*/_jsx(ChartAxisZoomSliderTrack, {
-      x: axisDirection === 'x' ? 0 : backgroundRectOffset,
-      y: axisDirection === 'x' ? backgroundRectOffset : 0,
-      height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
-      width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_TRACK_SIZE,
-      rx: ZOOM_SLIDER_TRACK_SIZE / 2,
-      ry: ZOOM_SLIDER_TRACK_SIZE / 2,
-      axisId: axisId,
-      axisDirection: axisDirection,
-      reverse: reverse,
-      onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-      onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderActiveTrack, {
+    children: [track, /*#__PURE__*/_jsx(ChartAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
       axisPosition: axisPosition,
       axisDirection: axisDirection,
       reverse: reverse,
       showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
+      size: showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
+      preview: showPreview,
       onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
       onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
     })]

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -4,6 +4,8 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
+  size: number;
+  preview: boolean;
   zoomData: ZoomData;
   reverse?: boolean;
   showTooltip: boolean;
@@ -14,6 +16,8 @@ export declare function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -5,25 +5,39 @@ import { styled } from '@mui/material/styles';
 import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { shouldForwardProp } from '@mui/system';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
 import { ChartAxisZoomSliderThumb } from "./ChartAxisZoomSliderThumb.js";
 import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.js";
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
-import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.js";
+import { ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.js";
 import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ZoomSliderActiveTrackRect = styled('rect')(({
+const ZoomSliderActiveTrackRect = styled('rect', {
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'preview'
+})(({
   theme
 }) => ({
-  '&': {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
-    cursor: 'grab'
-  }
+  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+  cursor: 'grab',
+  variants: [{
+    props: {
+      preview: true
+    },
+    style: {
+      fill: 'transparent',
+      rx: 4,
+      ry: 4,
+      stroke: theme.palette.grey[500]
+    }
+  }]
 }));
 export function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,
@@ -162,11 +176,11 @@ export function ChartAxisZoomSliderActiveTrack({
     previewX = (zoomStart - minStart) / range * drawingArea.width;
     previewY = 0;
     previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
-    previewHeight = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewHeight = size;
     startThumbX = (zoomStart - minStart) / range * drawingArea.width;
-    startThumbY = 0;
+    startThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
-    endThumbY = 0;
+    endThumbY = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     if (reverse) {
       previewX = drawingArea.width - previewX - previewWidth;
       startThumbX = drawingArea.width - startThumbX;
@@ -177,11 +191,11 @@ export function ChartAxisZoomSliderActiveTrack({
   } else {
     previewX = 0;
     previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
-    previewWidth = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewWidth = size;
     previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
-    startThumbX = 0;
+    startThumbX = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
-    endThumbX = 0;
+    endThumbX = ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     endThumbY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
     if (reverse) {
       previewY = drawingArea.height - previewY - previewHeight;
@@ -191,12 +205,13 @@ export function ChartAxisZoomSliderActiveTrack({
     startThumbY -= previewThumbHeight / 2;
     endThumbY -= previewThumbHeight / 2;
   }
-  const previewOffset = (ZOOM_SLIDER_THUMB_HEIGHT - ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 2;
+  const previewOffset = ZOOM_SLIDER_THUMB_HEIGHT > size ? (ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(ZoomSliderActiveTrackRect, {
       ref: activePreviewRectRef,
       x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
       y: previewY + (axisDirection === 'x' ? previewOffset : 0),
+      preview: preview,
       width: previewWidth,
       height: previewHeight,
       onPointerEnter: onPointerEnter,

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AxisId } from '@mui/x-charts/internals';
+interface ChartAxisZoomSliderPreviewProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartAxisZoomSliderPreview({
+  axisId,
+  axisDirection,
+  reverse,
+  ...props
+}: ChartAxisZoomSliderPreviewProps): React.JSX.Element;
+export {};