@mui/x-charts 9.8.0 → 9.9.0

package/BarChart/useBarPlotData.mjs

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import getColor from "./seriesConfig/bar/getColor.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { checkBarChartScaleErrors } from "./checkBarChartScaleErrors.mjs";
 import { useBarSeriesContext } from "../hooks/useBarSeries.mjs";
-import { createGetBarDimensions } from "../internals/createGetBarDimensions.mjs";
+import { createGetBarDimensions, createGetBucketBarDimensions } from "../internals/createGetBarDimensions.mjs";
 import { useChartId } from "../hooks/useChartId.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartSamplingPyramids, getFullRangeZoom } from "../internals/plugins/featurePlugins/useChartCartesianAxis/sampling.selectors.mjs";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import { selectorChartZoomMap, selectorChartZoomOptionsLookup } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
 export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = useBarSeriesContext() ?? {
     series: {},
@@ -14,9 +19,14 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const defaultXAxisId = useXAxes().xAxisIds[0];
   const defaultYAxisId = useYAxes().yAxisIds[0];
   const chartId = useChartId();
-  return processBarDataForPlot(drawingArea, chartId, seriesData.stackingGroups, seriesData.series, xAxes, yAxes, defaultXAxisId, defaultYAxisId);
+  const store = useStore();
+  const samplingPyramids = store.use(selectorChartSamplingPyramids);
+  const zoomMap = store.use(selectorChartZoomMap);
+  const zoomOptions = store.use(selectorChartZoomOptionsLookup);
+  const sampler = store.use(selectorChartSeriesConfig).bar?.sampler;
+  return React.useMemo(() => processBarDataForPlot(drawingArea, chartId, seriesData.stackingGroups, seriesData.series, xAxes, yAxes, defaultXAxisId, defaultYAxisId, samplingPyramids, zoomMap, sampler, zoomOptions), [drawingArea, chartId, seriesData.stackingGroups, seriesData.series, xAxes, yAxes, defaultXAxisId, defaultYAxisId, samplingPyramids, zoomMap, sampler, zoomOptions]);
 }
-export function processBarDataForPlot(drawingArea, chartId, stackingGroups, series, xAxes, yAxes, defaultXAxisId, defaultYAxisId) {
+export function processBarDataForPlot(drawingArea, chartId, stackingGroups, series, xAxes, yAxes, defaultXAxisId, defaultYAxisId, samplingPyramids = {}, zoomMap, sampler, zoomOptions) {
   const masks = {};
   const data = stackingGroups.flatMap(({
     ids: seriesIds
@@ -42,31 +52,13 @@ export function processBarDataForPlot(drawingArea, chartId, stackingGroups, seri
       const xOrigin = Math.round(xScale(0) ?? 0);
       const yOrigin = Math.round(yScale(0) ?? 0);
       const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+      const stackId = series[seriesId].stack;
       const seriesDataPoints = [];
-      const getBarDimensions = createGetBarDimensions({
-        verticalLayout,
-        xAxisConfig,
-        yAxisConfig,
-        series: series[seriesId],
-        numberOfGroups: stackingGroups.length
-      });
-      for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-        const barDimensions = getBarDimensions(dataIndex, groupIndex);
-        if (barDimensions == null) {
-          continue;
-        }
-        const stackId = series[seriesId].stack;
-        const result = _extends({
-          seriesId,
-          dataIndex,
-          hidden: series[seriesId].hidden
-        }, barDimensions, {
-          color: colorGetter(dataIndex),
-          value: series[seriesId].data[dataIndex],
-          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
-        });
+
+      // Culls off-screen bars then records the bar's border-radius side and mask contribution.
+      const registerResult = (result, dataIndex) => {
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          continue;
+          return;
         }
         const lastNegative = lastNegativePerIndex.get(dataIndex);
         const lastPositive = lastPositivePerIndex.get(dataIndex);
@@ -107,6 +99,90 @@ export function processBarDataForPlot(drawingArea, chartId, stackingGroups, seri
         mask.hasNegative = mask.hasNegative || (reverse ? value > 0 : value < 0);
         mask.hasPositive = mask.hasPositive || (reverse ? value < 0 : value > 0);
         seriesDataPoints.push(result);
+      };
+      const makeResult = (dataIndex, barDimensions) => _extends({
+        seriesId,
+        dataIndex,
+        hidden: series[seriesId].hidden
+      }, barDimensions, {
+        color: colorGetter(dataIndex),
+        value: series[seriesId].data[dataIndex],
+        maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
+      });
+      const pyramid = samplingPyramids[seriesId];
+      const baseAxisId = verticalLayout ? xAxisId : yAxisId;
+      const zoom = zoomMap?.get(baseAxisId) ?? (pyramid ? getFullRangeZoom(baseAxisId) : undefined);
+      const availableSize = verticalLayout ? drawingArea.width : drawingArea.height;
+      const minSpan = zoomOptions?.[baseAxisId]?.minSpan ?? 0;
+      // The sampler (pro) owns the level-of-detail math; community renders one merged rect per
+      // bucket, spanning its index range with the bucket's min-base/max-top envelope.
+      const sampledBuckets = pyramid && zoom && sampler?.sample ? sampler.sample({
+        built: pyramid,
+        zoom,
+        availableSize,
+        minSpan
+      }) : null;
+      if (sampledBuckets) {
+        const getBucketBarDimensions = createGetBucketBarDimensions({
+          verticalLayout,
+          xAxisConfig,
+          yAxisConfig,
+          series: series[seriesId],
+          numberOfGroups: stackingGroups.length
+        });
+        const stacked = series[seriesId].visibleStackedData;
+        for (const {
+          startIndex,
+          endIndex,
+          indices
+        } of sampledBuckets) {
+          let low = Infinity;
+          let high = -Infinity;
+          for (let k = 0; k < indices.length; k += 1) {
+            const point = stacked[indices[k]];
+            // Both coords, so diverging/negative bars (`[0, -5]`, base > top) keep their full extent.
+            low = Math.min(low, point[0], point[1]);
+            high = Math.max(high, point[0], point[1]);
+          }
+          const dimensions = getBucketBarDimensions(startIndex, endIndex, low, high, groupIndex);
+          registerResult(makeResult(startIndex, dimensions), startIndex);
+        }
+      } else {
+        const getBarDimensions = createGetBarDimensions({
+          verticalLayout,
+          xAxisConfig,
+          yAxisConfig,
+          series: series[seriesId],
+          numberOfGroups: stackingGroups.length
+        });
+
+        // Narrow to the visible index window so panning/zoom doesn't compute every off-screen bar.
+        // `firstIndex`/`lastIndex` bound the band axis range; the cull in `registerResult` stays
+        // exact. A 1-bucket margin covers grouped-bar offsets and partial edge bars.
+        const baseData = baseScaleConfig.data;
+        const dataLength = baseData.length;
+        let firstIndex = 0;
+        let lastIndex = dataLength - 1;
+        if (dataLength > 1) {
+          const baseScale = baseScaleConfig.scale;
+          const p0 = baseScale(baseData[0]);
+          const slope = baseScale(baseData[1]) - p0; // signed px per index (handles reversed axis)
+          if (slope !== 0) {
+            const winLo = verticalLayout ? xMin : yMin;
+            const winHi = verticalLayout ? xMax : yMax;
+            const ia = (winLo - p0) / slope;
+            const ib = (winHi - p0) / slope;
+            firstIndex = Math.max(0, Math.floor(Math.min(ia, ib)) - 1);
+            lastIndex = Math.min(dataLength - 1, Math.ceil(Math.max(ia, ib)) + 1);
+          }
+        }
+        for (let dataIndex = firstIndex; dataIndex <= lastIndex; dataIndex += 1) {
+          const barDimensions = getBarDimensions(dataIndex, groupIndex);
+          if (barDimensions == null) {
+            continue;
+          }
+          registerResult(makeResult(dataIndex, barDimensions), dataIndex);
+        }
       }
       return {
         seriesId,

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # Changelog
 
+## 9.9.0
+
+_Jul 9, 2026_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 [Data sampling](https://mui.com/x/react-charts/performance/#sampling) for better performance with large bar and line charts
+- 🗺️ [Maps zoom support](https://mui.com/x/react-charts/map/#zoom)
+- ☑️ Support [applying filters on demand](https://mui.com/x/react-data-grid/filtering/customization/#apply-filters-on-demand) in the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@mustafajw07, @sebastianfrey
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @brijeshb42, @hasdfa, @Janpot, @JCQuintas, @LukasTy, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.9.0`
+
+- [DataGrid] Add `dataSourceKeepPreviousData` prop (#22554) @LukasTy
+- [DataGrid] Add controlled filter panel for applying filters on demand (#23023) @sebastianfrey
+
+#### `@mui/x-data-grid-pro@9.9.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@9.9.0`.
+
+#### `@mui/x-data-grid-premium@9.9.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@9.9.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.9.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.9.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@9.9.0`, plus:
+
+- [DateRangeCalendar] Avoid unnecessary month switch when the value is already visible (#22996) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@9.9.0`
+
+- [charts] Optimize and de-duplicate sampled axis-highlight band lookup (#23052) @JCQuintas
+- [charts] Unify tooltip item position getter and selector into a single selector API (#23041) @alexfauquette
+- [charts] Fix impossible condition in axis text angle warning (#23102) @sai6855
+
+#### `@mui/x-charts-pro@9.9.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@9.9.0`, plus:
+
+- [charts-pro] Add data sampling for large bar and line charts (#22830) @JCQuintas
+- [charts-pro] Allow sampling on non-zoomable charts (#23051) @JCQuintas
+
+#### `@mui/x-charts-premium@9.9.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+#### Breaking changes
+
+The API of the `Unstable_ChartsGeoDataProviderPremium` got modified.
+Props `scale`, `rotation`, and `translation` are replaced by props `view` and `initialView`.
+Same behavior can be obtained with `view.zoomLevel`, `view.center`, and `view.translation`.
+See the [zoom view section](https://mui.com/x/react-charts/map/#control) for detailed information
+
+Same changes as in `@mui/x-charts-pro@9.9.0`, plus:
+
+- [charts-premium] Maps zoom support (#22709) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.9.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.9.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@9.9.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.5`
+
+- [scheduler] Introduce event resource helper utilities (#23022) @mustafajw07
+- [scheduler] Preserve multi-day event continuity across overflow (#22797) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.5`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.9.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix broken social preview image on shared docs links (#23055) @sai6855
+- [docs] Review and clean up react-chat docs demos & gallery; fix actions-bar layout (#22993) @hasdfa
+- [docs] Update the Pickers recommended date library bundle sizes (#23087) @LukasTy
+
+### Core
+
+- [mcp] Add `@mui/mcp` server and `@mui/x-agent-tools`. See the [README](https://github.com/mui/mui-x/blob/master/packages/mcp/README.md) for setup (#22947) @aemartos
+- [code-infra] Avoid OOM in the Netlify docs build and CircleCI lint step (#23086) @LukasTy
+- [code-infra] Group `@atlaskit/pragmatic-drag-and-drop` renovate updates (#23105) @LukasTy
+- [code-infra] Validate npm publishing through dry run (#23038) @brijeshb42
+- [docs-infra] Enable `webpackBuildWorker` to bound docs build memory (#23100) @Janpot
+
+### Miscellaneous
+
+- [test] Fix flaky "should render only the pageSize" Data Grid virtualization test (#23090) @LukasTy
+- [test] Track `@mui/x-chat` bundle size via native expand (#23049) @Janpot
+
 ## 9.8.0
 
 _Jul 2, 2026_

package/ChartsAxis/ChartsAxis.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.mjs";
 export type { ChartsAxisSlots, ChartsAxisSlotProps };
 export interface ChartsAxisProps {
@@ -21,7 +22,7 @@ export interface ChartsAxisProps {
  *
  * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsAxis(props: ChartsAxisProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
 declare namespace ChartsAxis {
   var propTypes: any;
 }

package/ChartsAxis/ChartsAxis.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 export type { ChartsAxisSlots, ChartsAxisSlotProps };
 export interface ChartsAxisProps {
@@ -21,7 +22,7 @@ export interface ChartsAxisProps {
  *
  * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsAxis(props: ChartsAxisProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
 declare namespace ChartsAxis {
   var propTypes: any;
 }

package/ChartsAxisHighlight/ChartsAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.mjs";
 /**
  * Demos:
@@ -8,7 +9,7 @@ import type { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.mjs";
  *
  * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
  */
-declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
 declare namespace ChartsAxisHighlight {
   var propTypes: any;
 }

package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
 /**
  * Demos:
@@ -8,7 +9,7 @@ import type { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
  *
  * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
  */
-declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
 declare namespace ChartsAxisHighlight {
   var propTypes: any;
 }

package/ChartsAxisHighlight/ChartsXAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.mjs";
 import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.mjs";
 /**
@@ -6,4 +7,4 @@ import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.mj
 export default function ChartsXHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element[] | null;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -6,4 +7,4 @@ import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js
 export default function ChartsXHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element[] | null;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -13,6 +13,7 @@ var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+var _getSampledBandHighlight = require("./getSampledBandHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -29,13 +30,15 @@ function ChartsXHighlight(props) {
   const store = (0, _useStore.useStore)();
   const axisXValues = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisValue);
   const xAxes = store.use(_useChartCartesianAxis.selectorChartXAxis);
+  const bucketSizeByAxis = store.use(_useChartCartesianAxis.selectorChartHighlightBucketSize);
   if (axisXValues.length === 0) {
     return null;
   }
-  return axisXValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisXValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
@@ -46,9 +49,23 @@ function ChartsXHighlight(props) {
         console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isXScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = (0, _getSampledBandHighlight.getSampledBandHighlight)({
+        scale: xScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: xAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-        d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+        d: `M ${bandStart} ${top} l ${bandSize} 0 l 0 ${height} l ${-bandSize} 0 Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/ChartsXAxisHighlight.mjs

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import { selectorChartsHighlightXAxisValue, selectorChartHighlightBucketSize, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { useDrawingArea } from "../hooks/index.mjs";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.mjs";
+import { getSampledBandHighlight } from "./getSampledBandHighlight.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -23,13 +24,15 @@ export default function ChartsXHighlight(props) {
   const store = useStore();
   const axisXValues = store.use(selectorChartsHighlightXAxisValue);
   const xAxes = store.use(selectorChartXAxis);
+  const bucketSizeByAxis = store.use(selectorChartHighlightBucketSize);
   if (axisXValues.length === 0) {
     return null;
   }
-  return axisXValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisXValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = getValueToPositionMapper(xScale);
@@ -40,9 +43,23 @@ export default function ChartsXHighlight(props) {
         console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isXScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = getSampledBandHighlight({
+        scale: xScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: xAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-        d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+        d: `M ${bandStart} ${top} l ${bandSize} 0 l 0 ${height} l ${-bandSize} 0 Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.mjs";
 import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.mjs";
 /**
@@ -6,4 +7,4 @@ import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.mj
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element[] | null;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -6,4 +7,4 @@ import type { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): import("react/jsx-runtime").JSX.Element[] | null;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -13,6 +13,7 @@ var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+var _getSampledBandHighlight = require("./getSampledBandHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -29,13 +30,15 @@ function ChartsYHighlight(props) {
   const store = (0, _useStore.useStore)();
   const axisYValues = store.use(_useChartCartesianAxis.selectorChartsHighlightYAxisValue);
   const yAxes = store.use(_useChartCartesianAxis.selectorChartYAxis);
+  const bucketSizeByAxis = store.use(_useChartCartesianAxis.selectorChartHighlightBucketSize);
   if (axisYValues.length === 0) {
     return null;
   }
-  return axisYValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisYValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
@@ -46,9 +49,23 @@ function ChartsYHighlight(props) {
         console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isYScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = (0, _getSampledBandHighlight.getSampledBandHighlight)({
+        scale: yScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: yAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-        d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        d: `M ${left} ${bandStart} l 0 ${bandSize} l ${width} 0 l 0 ${-bandSize} Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/ChartsYAxisHighlight.mjs

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import { selectorChartsHighlightYAxisValue, selectorChartHighlightBucketSize, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { useDrawingArea } from "../hooks/index.mjs";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.mjs";
+import { getSampledBandHighlight } from "./getSampledBandHighlight.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -23,13 +24,15 @@ export default function ChartsYHighlight(props) {
   const store = useStore();
   const axisYValues = store.use(selectorChartsHighlightYAxisValue);
   const yAxes = store.use(selectorChartYAxis);
+  const bucketSizeByAxis = store.use(selectorChartHighlightBucketSize);
   if (axisYValues.length === 0) {
     return null;
   }
-  return axisYValues.map(({
-    axisId,
-    value
-  }) => {
+  return axisYValues.map(axisValue => {
+    const {
+      axisId,
+      value
+    } = axisValue;
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = getValueToPositionMapper(yScale);
@@ -40,9 +43,23 @@ export default function ChartsYHighlight(props) {
         console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
     }
+    let bandStart = 0;
+    let bandSize = 0;
+    if (isYScaleOrdinal) {
+      ({
+        bandStart,
+        bandSize
+      } = getSampledBandHighlight({
+        scale: yScale,
+        value,
+        dataIndex: axisValue.dataIndex,
+        data: yAxis.data,
+        bucketSize: bucketSizeByAxis.get(axisId) ?? 1
+      }));
+    }
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-        d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        d: `M ${left} ${bandStart} l 0 ${bandSize} l ${width} 0 l 0 ${-bandSize} Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/ChartsAxisHighlight/getSampledBandHighlight.d.mts

@@ -0,0 +1,27 @@
+import type { D3OrdinalScale } from "../models/axis.mjs";
+interface SampledBandHighlightParams {
+  scale: D3OrdinalScale;
+  /** The highlighted value. */
+  value: number | Date;
+  /** The data index of the highlighted value, when known (O(1) lookup). */
+  dataIndex: number | undefined;
+  /** The axis data. */
+  data: readonly any[] | undefined;
+  /** The number of merged data points per band when the series is sampled. */
+  bucketSize: number;
+}
+/**
+ * Computes the band highlight rectangle along the ordinal axis.
+ * When the series is sampled (`bucketSize > 1`), the band is widened to cover the whole merged bucket.
+ */
+export declare function getSampledBandHighlight({
+  scale,
+  value,
+  dataIndex,
+  data,
+  bucketSize
+}: SampledBandHighlightParams): {
+  bandStart: number;
+  bandSize: number;
+};
+export {};