@mui/x-charts-pro 8.3.1 → 8.4.0

package/BarChartPro/BarChartPro.js

@@ -26,7 +26,7 @@ var _ChartZoomSlider = require("../ChartZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
-var _BarChartPro = require("./BarChartPro.plugins");
+var _BarChartPro2 = require("./BarChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
@@ -74,7 +74,7 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     zoomData,
     onZoomChange,
     apiRef,
-    plugins: _BarChartPro.BAR_CHART_PRO_PLUGINS
+    plugins: _BarChartPro2.BAR_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
@@ -82,11 +82,12 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
-      }))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") BarChartPro.displayName = "BarChartPro";
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -325,7 +326,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -388,7 +390,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -446,7 +449,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -504,7 +508,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -562,7 +567,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -620,7 +626,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -678,7 +685,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -736,7 +744,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -806,7 +815,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -868,7 +878,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -925,7 +936,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -982,7 +994,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1039,7 +1052,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1096,7 +1110,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1153,7 +1168,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1210,7 +1226,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])

package/CHANGELOG.md

@@ -5,6 +5,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.4.0
+
+_May 21, 2025_
+
+We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔺 Support regular [`pyramid` variation in the `<FunnelChart />` component](https://mui.com/x/react-charts/funnel/#pyramid-chart):
+
+  <img width="398" alt="Pyramid funnel chart" src="https://github.com/user-attachments/assets/90ccb221-3a48-4ffa-8878-89c6db16da86" />
+
+- 📚 Documentation improvements
+- 🌎 Improve Icelandic (is-IS) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@aizerin, @arminmeh, @campmarc, @jyash97, @mapache-salvaje, @noraleonte, @nusr, @ragnarr18, @romgrk, @whereisrmsqhs.
+Following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @rita-codes.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.4.0`
+
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#14737) @campmarc
+- [DataGrid] Fix disabled typography variants crashing grid (#17934) @KenanYusuf
+- [DataGrid] Fix tree data demo crash (#17904) @MBilalShafi
+- [DataGrid] Use `exclude` selection model type if quick filter does not have actual values (#17899) @arminmeh
+- [DataGrid] Fix clipboard copy behavior for cell ranges with empty cells (#16797) @nusr
+- [l10n] Improve Icelandic (is-IS) locale (#17915) @ragnarr18
+
+#### `@mui/x-data-grid-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.4.0`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17122) @whereisrmsqhs
+- [DataGridPro] Preserve row state during server-side lazy loading (#17743) @arminmeh
+- [DataGridPro] Prevent text selection when reordering rows (#16568) @jyash97
+
+#### `@mui/x-data-grid-premium@8.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.4.0`
+
+- [fields] Ensure fresh `disabled` value is used when focusing or clicking (#17914) @aizerin
+- [fields] Improve the field controlled edition (#17816) @flaviendelangle
+- [pickers] Fix `PickersTextField` overflow (#17942) @noraleonte
+
+#### `@mui/x-date-pickers-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.4.0`
+
+- [charts] Add grouped axes demo (#17848) @bernardobelchior
+- [charts] Enable tooltip disable portal (#17871) @alexfauquette
+- [charts] Improve performance in scatter chart (#17849) @bernardobelchior
+- [charts] Recreate `isPointInside` less often (#17850) @bernardobelchior
+- [charts] Try fix for flaky `useAnimate` test (#17777) @JCQuintas
+- [charts] Add `isXInside` and `isYInside` (#17911) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.4.0`, plus:
+
+- [charts-pro] Add size for zoom slider (#17736) @bernardobelchior
+- [charts-pro] Add zoom slider tooltip (#17733) @bernardobelchior
+- [charts-pro] Clean and document Heatmap Tooltip (#17933) @alexfauquette
+- [charts-pro] Introduce `Pyramid` chart (#17783) @JCQuintas
+- [charts-pro] Update zoom slider nomenclature (#17938) @bernardobelchior
+- [charts-pro] Fix error when importing rasterizehtml (#17897) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.4.0`
+
+- [TreeView] Add `getItemChildren` prop in `RichTreeView` (#17894) @rita-codes
+- [TreeView] Add a method in the `apiRef` to toggle the editing status of an item (#17768) @rita-codes
+- [TreeView] Add missing sx prop on the Tree Item component (#17930) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.4.0`.
+
+### Docs
+
+- [docs] Add a recipe for drag and drop row grouping (#17638) @KenanYusuf
+- [docs] Add introductory text to Data Grid component pages (#17902) @KenanYusuf
+- [docs] Refactor embedded CodeSandbox on Data Grid—Quickstart page (#17749) @rita-codes
+- [docs] Remove double border on Data Grid—Quickstart demo (#17932) @rita-codes
+- [docs] Standardize `apiRef` copy (#17776) @mapache-salvaje
+- [docs][DataGrid] Revise server-side data docs (#17007) @mapache-salvaje
+- [docs][DataGrid] Audit and revise the tree data doc (#17650) @mapache-salvaje
+- [docs][pickers] Fix migration guide references to range fields (#17861) @LukasTy
+- [docs][charts] Reorganize the Tooltip documentation (#17917) @alexfauquette
+
+### Core
+
+- [core] refactor: remove manual `displayName` (#17845) @romgrk
+- [code-infra] Document how to use `vitest` cli (#17847) @JCQuintas
+- [code-infra] Increase charts export test timeout (#17909) @JCQuintas
+- [code-infra] Set `isolatedModules=true` in tsconfig (#17781) @JCQuintas
+- [infra] Ensure proper docs preview path resolution (#17863) @LukasTy
+
 ## 8.3.1
 
 _May 14, 2025_

package/ChartContainerPro/ChartContainerPro.js

@@ -52,6 +52,7 @@ const ChartContainerPro = exports.ChartContainerPro = /*#__PURE__*/React.forward
 });
 
 // @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartContainerPro.displayName = "ChartContainerPro";
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -17,7 +17,7 @@ var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./ChartZoomSlider.js";
-export { type ChartAxisZoomSliderHandleClasses, type ChartAxisZoomSliderHandleClassKey, chartAxisZoomSliderHandleClasses } from "./internals/chartAxisZoomSliderHandleClasses.js";
+export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";

package/ChartZoomSlider/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  chartAxisZoomSliderHandleClasses: true
+  chartAxisZoomSliderThumbClasses: true
 };
-Object.defineProperty(exports, "chartAxisZoomSliderHandleClasses", {
+Object.defineProperty(exports, "chartAxisZoomSliderThumbClasses", {
   enumerable: true,
   get: function () {
-    return _chartAxisZoomSliderHandleClasses.chartAxisZoomSliderHandleClasses;
+    return _chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses;
   }
 });
 var _ChartZoomSlider = require("./ChartZoomSlider");
@@ -24,4 +24,4 @@ Object.keys(_ChartZoomSlider).forEach(function (key) {
     }
   });
 });
-var _chartAxisZoomSliderHandleClasses = require("./internals/chartAxisZoomSliderHandleClasses");
+var _chartAxisZoomSliderThumbClasses = require("./internals/chartAxisZoomSliderThumbClasses");

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -15,17 +15,18 @@ var _internals = require("@mui/x-charts/internals");
 var _styles = require("@mui/material/styles");
 var _hooks = require("@mui/x-charts/hooks");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
 var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
-var _ChartAxisZoomSliderHandle = require("./ChartAxisZoomSliderHandle");
+var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
 var _jsxRuntime = require("react/jsx-runtime");
-const BackgroundRect = (0, _styles.styled)('rect')(({
+const ZoomSliderTrack = (0, _styles.styled)('rect')(({
   theme
 }) => ({
   '&': {
     fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300]
   }
 }));
-const ZoomRangePreviewRect = (0, _styles.styled)('rect')(({
+const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
   theme
 }) => ({
   '&': {
@@ -33,11 +34,11 @@ const ZoomRangePreviewRect = (0, _styles.styled)('rect')(({
     cursor: 'grab'
   }
 }));
-const ZOOM_SLIDER_BACKGROUND_SIZE = 8;
-const ZOOM_SLIDER_FOREGROUND_SIZE = 10;
-const ZOOM_SLIDER_HANDLE_HEIGHT = 20;
-const ZOOM_SLIDER_HANDLE_WIDTH = 10;
-const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_BACKGROUND_SIZE, ZOOM_SLIDER_FOREGROUND_SIZE, ZOOM_SLIDER_HANDLE_HEIGHT, ZOOM_SLIDER_HANDLE_WIDTH);
+const ZOOM_SLIDER_TRACK_SIZE = 8;
+const ZOOM_SLIDER_ACTIVE_TRACK_SIZE = 10;
+const ZOOM_SLIDER_THUMB_HEIGHT = 20;
+const ZOOM_SLIDER_THUMB_WIDTH = 10;
+const ZOOM_SLIDER_SIZE = Math.max(ZOOM_SLIDER_TRACK_SIZE, ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH);
 
 /**
  * Renders the zoom slider for a specific axis.
@@ -62,48 +63,58 @@ function ChartAxisZoomSlider({
   let x;
   let y;
   let reverse;
+  let axisPosition;
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
-    if (!axis) {
+    if (!axis || axis.position === 'none') {
       return null;
     }
     const axisSize = axis.height;
     x = drawingArea.left;
     y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
+    axisPosition = axis.position ?? 'bottom';
   } else {
     const axis = yAxis[axisId];
-    if (!axis) {
+    if (!axis || axis.position === 'none') {
       return null;
     }
     const axisSize = axis.width;
     x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
+    axisPosition = axis.position ?? 'left';
   }
-  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_BACKGROUND_SIZE) / 2;
+  const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_TRACK_SIZE) / 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     transform: `translate(${x} ${y})`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BackgroundRect, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderTrack, {
       x: axisDirection === 'x' ? 0 : backgroundRectOffset,
       y: axisDirection === 'x' ? backgroundRectOffset : 0,
-      height: axisDirection === 'x' ? ZOOM_SLIDER_BACKGROUND_SIZE : drawingArea.height,
-      width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_BACKGROUND_SIZE,
-      rx: ZOOM_SLIDER_BACKGROUND_SIZE / 2,
-      ry: ZOOM_SLIDER_BACKGROUND_SIZE / 2
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartAxisZoomSliderSpan, {
+      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
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
+      axisPosition: axisPosition,
       axisDirection: axisDirection,
       reverse: reverse
     })]
   });
 }
-function ChartAxisZoomSliderSpan({
+const formatter = Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 0
+});
+const zoomValueFormatter = value => formatter.format(value);
+function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
+  axisPosition,
   zoomData,
-  reverse
+  reverse,
+  valueFormatter = zoomValueFormatter
 }) {
   const {
     instance,
@@ -112,8 +123,11 @@ function ChartAxisZoomSliderSpan({
   const store = (0, _internals.useStore)();
   const drawingArea = (0, _internals.useDrawingArea)();
   const activePreviewRectRef = React.useRef(null);
-  const previewHandleWidth = axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_WIDTH : ZOOM_SLIDER_HANDLE_HEIGHT;
-  const previewHandleHeight = axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_HEIGHT : ZOOM_SLIDER_HANDLE_WIDTH;
+  const [startThumbEl, setStartThumbEl] = React.useState(null);
+  const [endThumbEl, setEndThumbEl] = React.useState(null);
+  const [showTooltip, setShowTooltip] = React.useState(null);
+  const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
+  const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
     const activePreviewRect = activePreviewRectRef.current;
     if (!activePreviewRect) {
@@ -154,6 +168,7 @@ function ChartAxisZoomSliderSpan({
     const onPointerUp = () => {
       activePreviewRect.removeEventListener('pointermove', onPointerMove);
       activePreviewRect.removeEventListener('pointerup', onPointerUp);
+      setShowTooltip(null);
     };
     const onPointerDown = event => {
       // Prevent text selection when dragging
@@ -185,6 +200,7 @@ function ChartAxisZoomSliderSpan({
       prevPointerZoom = pointerDownZoom;
       pointerZoomMin = pointerDownZoom - axisZoomData.start;
       pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
+      setShowTooltip('both');
       activePreviewRect.addEventListener('pointerup', onPointerUp);
       activePreviewRect.addEventListener('pointermove', onPointerMove);
     };
@@ -196,7 +212,7 @@ function ChartAxisZoomSliderSpan({
       onPointerMove.clear();
     };
   }, [axisDirection, axisId, instance, reverse, store, svgRef]);
-  const onResizeStart = event => {
+  const onStartThumbMove = event => {
     const element = svgRef.current;
     if (!element) {
       return;
@@ -229,7 +245,7 @@ function ChartAxisZoomSliderSpan({
       });
     });
   };
-  const onResizeEnd = event => {
+  const onEndThumbMove = event => {
     const element = svgRef.current;
     if (!element) {
       return;
@@ -266,67 +282,85 @@ function ChartAxisZoomSliderSpan({
   let previewY;
   let previewWidth;
   let previewHeight;
-  let startHandleX;
-  let startHandleY;
-  let endHandleX;
-  let endHandleY;
+  let startThumbX;
+  let startThumbY;
+  let endThumbX;
+  let endThumbY;
   if (axisDirection === 'x') {
     previewX = zoomData.start / 100 * drawingArea.width;
     previewY = 0;
     previewWidth = drawingArea.width * (zoomData.end - zoomData.start) / 100;
-    previewHeight = ZOOM_SLIDER_FOREGROUND_SIZE;
-    startHandleX = zoomData.start / 100 * drawingArea.width;
-    startHandleY = 0;
-    endHandleX = zoomData.end / 100 * drawingArea.width;
-    endHandleY = 0;
+    previewHeight = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    startThumbX = zoomData.start / 100 * drawingArea.width;
+    startThumbY = 0;
+    endThumbX = zoomData.end / 100 * drawingArea.width;
+    endThumbY = 0;
     if (reverse) {
       previewX = drawingArea.width - previewX - previewWidth;
-      startHandleX = drawingArea.width - startHandleX;
-      endHandleX = drawingArea.width - endHandleX;
+      startThumbX = drawingArea.width - startThumbX;
+      endThumbX = drawingArea.width - endThumbX;
     }
-    startHandleX -= previewHandleWidth / 2;
-    endHandleX -= previewHandleWidth / 2;
+    startThumbX -= previewThumbWidth / 2;
+    endThumbX -= previewThumbWidth / 2;
   } else {
     previewX = 0;
     previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
-    previewWidth = ZOOM_SLIDER_FOREGROUND_SIZE;
+    previewWidth = ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
     previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
-    startHandleX = 0;
-    startHandleY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
-    endHandleX = 0;
-    endHandleY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    startThumbX = 0;
+    startThumbY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
+    endThumbX = 0;
+    endThumbY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
     if (reverse) {
       previewY = drawingArea.height - previewY - previewHeight;
-      startHandleY = drawingArea.height - startHandleY;
-      endHandleY = drawingArea.height - endHandleY;
+      startThumbY = drawingArea.height - startThumbY;
+      endThumbY = drawingArea.height - endThumbY;
     }
-    startHandleY -= previewHandleHeight / 2;
-    endHandleY -= previewHandleHeight / 2;
+    startThumbY -= previewThumbHeight / 2;
+    endThumbY -= previewThumbHeight / 2;
   }
-  const previewOffset = (ZOOM_SLIDER_HANDLE_HEIGHT - ZOOM_SLIDER_FOREGROUND_SIZE) / 2;
+  const previewOffset = (ZOOM_SLIDER_THUMB_HEIGHT - ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomRangePreviewRect, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
       ref: activePreviewRectRef,
       x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
       y: previewY + (axisDirection === 'x' ? previewOffset : 0),
       width: previewWidth,
-      height: previewHeight
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderHandle.ChartAxisZoomSliderHandle, {
-      x: startHandleX,
-      y: startHandleY,
-      width: previewHandleWidth,
-      height: previewHandleHeight,
+      height: previewHeight,
+      onPointerEnter: () => setShowTooltip('both'),
+      onPointerLeave: () => setShowTooltip(null)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
+      ref: setStartThumbEl,
+      x: startThumbX,
+      y: startThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
       orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onResize: onResizeStart,
+      onMove: onStartThumbMove,
+      onPointerEnter: () => setShowTooltip('start'),
+      onPointerLeave: () => setShowTooltip(null),
       placement: "start"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderHandle.ChartAxisZoomSliderHandle, {
-      x: endHandleX,
-      y: endHandleY,
-      width: previewHandleWidth,
-      height: previewHandleHeight,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderThumb.ChartAxisZoomSliderThumb, {
+      ref: setEndThumbEl,
+      x: endThumbX,
+      y: endThumbY,
+      width: previewThumbWidth,
+      height: previewThumbHeight,
       orientation: axisDirection === 'x' ? 'horizontal' : 'vertical',
-      onResize: onResizeEnd,
+      onMove: onEndThumbMove,
+      onPointerEnter: () => setShowTooltip('end'),
+      onPointerLeave: () => setShowTooltip(null),
       placement: "end"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
+      anchorEl: startThumbEl,
+      open: showTooltip === 'start' || showTooltip === 'both',
+      placement: axisPosition,
+      children: valueFormatter(zoomData.start)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
+      anchorEl: endThumbEl,
+      open: showTooltip === 'end' || showTooltip === 'both',
+      placement: axisPosition,
+      children: valueFormatter(zoomData.end)
     })]
   });
 }

package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartZoomSliderThumbOwnerState {
+  onMove: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartZoomSliderThumbOwnerState {}
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartAxisZoomSliderThumb: React.ForwardRefExoticComponent<Omit<ChartZoomSliderThumbProps, "ref"> & React.RefAttributes<SVGRectElement>>;