@mui/x-charts 9.10.0 → 9.10.1

package/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -6,5 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createCommonKeyboardFocusHandler = require("../../../internals/createCommonKeyboardFocusHandler");
 var _composition = require("../../../models/seriesType/composition");
-const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_composition.composableCartesianSeriesTypes);
+const allowCycles = false;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_composition.composableCartesianSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 var _default = exports.default = keyboardFocusHandler;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.mjs

@@ -1,4 +1,6 @@
 import { createCommonKeyboardFocusHandler } from "../../../internals/createCommonKeyboardFocusHandler.mjs";
 import { composableCartesianSeriesTypes } from "../../../models/seriesType/composition.mjs";
-const keyboardFocusHandler = createCommonKeyboardFocusHandler(composableCartesianSeriesTypes);
+const allowCycles = false;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(composableCartesianSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 export default keyboardFocusHandler;

package/CHANGELOG.md

@@ -1,5 +1,111 @@
 # Changelog
 
+## 9.10.1
+
+_Jul 23, 2026_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦮 Improve accessibility of the Charts and Pickers components.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@kevincorizi-sbt, @mustafajw07, @SamanPandey-in
+
+The following team members contributed to this release:
+@brijeshb42, @hasdfa, @JCQuintas, @LukasTy, @michelengelen, @noraleonte, @rita-codes, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.10.1`
+
+- [data grid] Fix `getColumn` return type not reflecting that it can return undefined (#23165) @JCQuintas
+
+#### `@mui/x-data-grid-pro@9.10.1` [![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.10.1`.
+
+#### `@mui/x-data-grid-premium@9.10.1` [![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.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.10.1`
+
+- [pickers] Fix format placeholder brightness with a start adornment (#23189) @LukasTy
+
+#### `@mui/x-date-pickers-pro@9.10.1` [![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.10.1`, plus:
+
+- [DateRangePicker] Fix broken active range position underline in single input range fields (#23166) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@9.10.1`
+
+- [charts] Fix pie chart disappearing when an arc spans almost the full circle (#23145) @JCQuintas
+- [charts] Set `aria-hidden` on accessibility proxy divs at initialization (#23186) @kevincorizi-sbt
+- [charts] Fix keyboard navigation on series with different lengths (#23182) @JCQuintas
+- [charts] Fix out of bounds keyboard navigation (#23180) @silviuaavram
+
+#### `@mui/x-charts-pro@9.10.1` [![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.10.1`, plus:
+
+- [charts-pro] Fix highlight shifting on sampled bar charts (#23190) @noraleonte
+- [charts-pro] Sampled band highlight falls back to single-band width for Date/object values (#23024) @SamanPandey-in
+
+#### `@mui/x-charts-premium@9.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.10.1`
+
+- [TreeView] Fix selection propagation to exclude disabled items (#23012) @michelengelen
+
+#### `@mui/x-tree-view-pro@9.10.1` [![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.10.1`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.7`
+
+- [scheduler] Polish `EventCalendar` rendering for multi-resource events (#23161) @mustafajw07
+- [scheduler] Responsive header (#22954) @noraleonte
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.7` [![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.7`, plus:
+
+- [scheduler-premium] Add the dependencies data model (#23117) @rita-codes
+- [scheduler-premium] Dependencies - Render the FS arrow (#23162) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix clearing, layout shift, and prop leak in Pickers demos (#23191) @LukasTy
+
+### Core
+
+- [code-infra] Validate working of specific code-infra canary (#23207) @brijeshb42
+
+### Miscellaneous
+
+- [chat] Normalize message part link URLs (#23187) @hasdfa
+- [x-chat] Fix object URL leaks for submitted attachments (#23198) @hasdfa
+- [internals] Make disposable types self-contained without `esnext.disposable` lib (#23164) @JCQuintas
+
 ## 9.10.0
 
 _Jul 17, 2026_

package/ChartsAxisHighlight/getSampledBandHighlight.d.mts

@@ -2,7 +2,7 @@ import type { D3OrdinalScale } from "../models/axis.mjs";
 interface SampledBandHighlightParams {
   scale: D3OrdinalScale;
   /** The highlighted value. */
-  value: number | Date;
+  value: string | number | Date;
   /** The data index of the highlighted value, when known (O(1) lookup). */
   dataIndex: number | undefined;
   /** The axis data. */

package/ChartsAxisHighlight/getSampledBandHighlight.d.ts

@@ -2,7 +2,7 @@ import type { D3OrdinalScale } from "../models/axis.js";
 interface SampledBandHighlightParams {
   scale: D3OrdinalScale;
   /** The highlighted value. */
-  value: number | Date;
+  value: string | number | Date;
   /** The data index of the highlighted value, when known (O(1) lookup). */
   dataIndex: number | undefined;
   /** The axis data. */

package/ChartsAxisHighlight/getSampledBandHighlight.js

@@ -4,6 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSampledBandHighlight = getSampledBandHighlight;
+var _getSampledBucketRegion = require("../internals/getSampledBucketRegion");
+function findDataIndex(data, value) {
+  if (value instanceof Date) {
+    const time = value.getTime();
+    return data.findIndex(item => item instanceof Date && item.getTime() === time);
+  }
+  return data.indexOf(value);
+}
 /**
  * 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.
@@ -20,12 +28,16 @@ function getSampledBandHighlight({
   let bandStart = scale(value) - halfPadding;
   let bandSize = step;
   if (bucketSize > 1 && data) {
-    const index = dataIndex ?? data.indexOf(value);
+    const index = dataIndex ?? findDataIndex(data, value);
     if (index >= 0) {
       const bucketStart = Math.floor(index / bucketSize) * bucketSize;
       const bucketEnd = Math.min(bucketStart + bucketSize - 1, data.length - 1);
-      bandStart = scale(data[bucketStart]) - halfPadding;
-      bandSize = (bucketEnd - bucketStart + 1) * step;
+      const {
+        regionStart,
+        regionSize
+      } = (0, _getSampledBucketRegion.getSampledBucketRegion)(scale, data, bucketStart, bucketEnd);
+      bandStart = regionStart;
+      bandSize = regionSize;
     }
   }
   return {

package/ChartsAxisHighlight/getSampledBandHighlight.mjs

@@ -1,3 +1,11 @@
+import { getSampledBucketRegion } from "../internals/getSampledBucketRegion.mjs";
+function findDataIndex(data, value) {
+  if (value instanceof Date) {
+    const time = value.getTime();
+    return data.findIndex(item => item instanceof Date && item.getTime() === time);
+  }
+  return data.indexOf(value);
+}
 /**
  * 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.
@@ -14,12 +22,16 @@ export function getSampledBandHighlight({
   let bandStart = scale(value) - halfPadding;
   let bandSize = step;
   if (bucketSize > 1 && data) {
-    const index = dataIndex ?? data.indexOf(value);
+    const index = dataIndex ?? findDataIndex(data, value);
     if (index >= 0) {
       const bucketStart = Math.floor(index / bucketSize) * bucketSize;
       const bucketEnd = Math.min(bucketStart + bucketSize - 1, data.length - 1);
-      bandStart = scale(data[bucketStart]) - halfPadding;
-      bandSize = (bucketEnd - bucketStart + 1) * step;
+      const {
+        regionStart,
+        regionSize
+      } = getSampledBucketRegion(scale, data, bucketStart, bucketEnd);
+      bandStart = regionStart;
+      bandSize = regionSize;
     }
   }
   return {

package/LineChart/seriesConfig/keyboardFocusHandler.js

@@ -6,5 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 var _composition = require("../../models/seriesType/composition");
-const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_composition.composableCartesianSeriesTypes);
+const allowCycles = false;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_composition.composableCartesianSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 var _default = exports.default = keyboardFocusHandler;

package/LineChart/seriesConfig/keyboardFocusHandler.mjs

@@ -1,4 +1,6 @@
 import { createCommonKeyboardFocusHandler } from "../../internals/createCommonKeyboardFocusHandler.mjs";
 import { composableCartesianSeriesTypes } from "../../models/seriesType/composition.mjs";
-const keyboardFocusHandler = createCommonKeyboardFocusHandler(composableCartesianSeriesTypes);
+const allowCycles = false;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(composableCartesianSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 export default keyboardFocusHandler;

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
-  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
+  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
-  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
+  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/seriesConfig/keyboardFocusHandler.js

@@ -6,5 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 const outSeriesTypes = new Set(['radar']);
-const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(outSeriesTypes, true);
+const allowCycles = true;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 var _default = exports.default = keyboardFocusHandler;

package/RadarChart/seriesConfig/keyboardFocusHandler.mjs

@@ -1,4 +1,6 @@
 import { createCommonKeyboardFocusHandler } from "../../internals/createCommonKeyboardFocusHandler.mjs";
 const outSeriesTypes = new Set(['radar']);
-const keyboardFocusHandler = createCommonKeyboardFocusHandler(outSeriesTypes, true);
+const allowCycles = true;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 export default keyboardFocusHandler;

package/hooks/animation/useAnimatePieArc.js

@@ -7,6 +7,7 @@ exports.useAnimatePieArc = useAnimatePieArc;
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _useAnimate = require("./useAnimate");
+var _snapEndAngleToFullCircle = require("../../internals/snapEndAngleToFullCircle");
 function pieArcPropsInterpolator(from, to) {
   const interpolateStartAngle = (0, _d3Interpolate.interpolateNumber)(from.startAngle, to.startAngle);
   const interpolateEndAngle = (0, _d3Interpolate.interpolateNumber)(from.endAngle, to.endAngle);
@@ -53,7 +54,7 @@ function useAnimatePieArc(props) {
         innerRadius: p.innerRadius,
         outerRadius: p.outerRadius,
         startAngle: p.startAngle,
-        endAngle: p.endAngle
+        endAngle: (0, _snapEndAngleToFullCircle.snapEndAngleToFullCircle)(p.startAngle, p.endAngle, p.outerRadius, p.paddingAngle)
       }),
       visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
     }),

package/hooks/animation/useAnimatePieArc.mjs

@@ -1,6 +1,7 @@
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { useAnimate } from "./useAnimate.mjs";
+import { snapEndAngleToFullCircle } from "../../internals/snapEndAngleToFullCircle.mjs";
 function pieArcPropsInterpolator(from, to) {
   const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
   const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
@@ -47,7 +48,7 @@ export function useAnimatePieArc(props) {
         innerRadius: p.innerRadius,
         outerRadius: p.outerRadius,
         startAngle: p.startAngle,
-        endAngle: p.endAngle
+        endAngle: snapEndAngleToFullCircle(p.startAngle, p.endAngle, p.outerRadius, p.paddingAngle)
       }),
       visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
     }),

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.10.0
+ * @mui/x-charts v9.10.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.10.0
+ * @mui/x-charts v9.10.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/commonNextFocusItem.d.mts

@@ -28,7 +28,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
@@ -41,7 +41,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(

package/internals/commonNextFocusItem.d.ts

@@ -28,7 +28,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
@@ -41,7 +41,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(

package/internals/commonNextFocusItem.js

@@ -33,9 +33,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getNextIndexFocusedItem(currentItem, state) {
     const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
     let seriesId = currentItem?.seriesId;
@@ -84,9 +84,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getPreviousIndexFocusedItem(currentItem, state) {
     const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
     let seriesId = currentItem?.seriesId;

package/internals/commonNextFocusItem.mjs

@@ -25,9 +25,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getNextIndexFocusedItem(currentItem, state) {
     const processedSeries = selectorChartSeriesProcessed(state);
     let seriesId = currentItem?.seriesId;
@@ -76,9 +76,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getPreviousIndexFocusedItem(currentItem, state) {
     const processedSeries = selectorChartSeriesProcessed(state);
     let seriesId = currentItem?.seriesId;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -60,6 +60,7 @@ function ChartsAccessibilityProxy() {
           div.setAttribute('tabindex', '0');
         }
         div.setAttribute('role', 'img');
+        div.setAttribute('aria-hidden', 'true');
         div.setAttribute('aria-labelledby', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
         div.style.width = '100%';
         div.style.height = '100%';

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs

@@ -56,6 +56,7 @@ export function ChartsAccessibilityProxy() {
           div.setAttribute('tabindex', '0');
         }
         div.setAttribute('role', 'img');
+        div.setAttribute('aria-hidden', 'true');
         div.setAttribute('aria-labelledby', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
         div.style.width = '100%';
         div.style.height = '100%';

package/internals/createGetBarDimensions.js

@@ -7,6 +7,7 @@ exports.createGetBarDimensions = createGetBarDimensions;
 exports.createGetBucketBarDimensions = createGetBucketBarDimensions;
 var _findMinMax = require("./findMinMax");
 var _getBandSize = require("./getBandSize");
+var _getSampledBucketRegion = require("./getSampledBucketRegion");
 /** Minimum on-screen gap (px) kept between merged (sampled) bars so they stay distinguishable. */
 const MIN_SAMPLED_BAR_GAP_PX = 2;
 function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
@@ -78,9 +79,12 @@ function createGetBucketBarDimensions(params) {
   const step = baseScale.step();
   const valueScale = verticalLayout ? yAxisConfig.scale : xAxisConfig.scale;
   return function getBucketBarDimensions(startIndex, endIndex, min, max, groupIndex) {
-    const spanStart = baseScale(baseScaleConfig.data[startIndex]);
+    // Region matches the axis highlight (see `getSampledBandHighlight`) so bar and highlight stay in sync.
+    const {
+      regionStart,
+      regionSize: bucketStride
+    } = (0, _getSampledBucketRegion.getSampledBucketRegion)(baseScale, baseScaleConfig.data, startIndex, endIndex);
     const bucketCount = endIndex - startIndex + 1;
-    const bucketStride = bucketCount * step;
 
     // Keep the gap between buckets proportional to the bucket (same ratio as an unsampled chart),
     // but never thinner than MIN_SAMPLED_BAR_GAP_PX so it stays visible at every level and zoom.
@@ -89,7 +93,8 @@ function createGetBucketBarDimensions(params) {
       barWidth,
       offset
     } = (0, _getBandSize.getBandSize)(bucketStride - gap, numberOfGroups, baseScaleConfig.barGapRatio);
-    const barOffset = groupIndex * (barWidth + offset);
+    // Center the bars in the region (split the gap to both sides) so they sit under the highlight.
+    const barOffset = gap / 2 + groupIndex * (barWidth + offset);
     const valueCoordinates = [valueScale(min), valueScale(max)];
     const [minValueCoord, maxValueCoord] = (0, _findMinMax.findMinMax)(valueCoordinates).map(v => Math.round(v));
     let barSize = maxValueCoord - minValueCoord;
@@ -97,8 +102,8 @@ function createGetBucketBarDimensions(params) {
       barSize = Math.max(series.minBarSize, barSize);
     }
     return {
-      x: verticalLayout ? spanStart + barOffset : minValueCoord,
-      y: verticalLayout ? minValueCoord : spanStart + barOffset,
+      x: verticalLayout ? regionStart + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : regionStart + barOffset,
       height: verticalLayout ? barSize : barWidth,
       width: verticalLayout ? barWidth : barSize
     };

package/internals/createGetBarDimensions.mjs

@@ -1,5 +1,6 @@
 import { findMinMax } from "./findMinMax.mjs";
 import { getBandSize } from "./getBandSize.mjs";
+import { getSampledBucketRegion } from "./getSampledBucketRegion.mjs";
 
 /** Minimum on-screen gap (px) kept between merged (sampled) bars so they stay distinguishable. */
 const MIN_SAMPLED_BAR_GAP_PX = 2;
@@ -72,9 +73,12 @@ export function createGetBucketBarDimensions(params) {
   const step = baseScale.step();
   const valueScale = verticalLayout ? yAxisConfig.scale : xAxisConfig.scale;
   return function getBucketBarDimensions(startIndex, endIndex, min, max, groupIndex) {
-    const spanStart = baseScale(baseScaleConfig.data[startIndex]);
+    // Region matches the axis highlight (see `getSampledBandHighlight`) so bar and highlight stay in sync.
+    const {
+      regionStart,
+      regionSize: bucketStride
+    } = getSampledBucketRegion(baseScale, baseScaleConfig.data, startIndex, endIndex);
     const bucketCount = endIndex - startIndex + 1;
-    const bucketStride = bucketCount * step;
 
     // Keep the gap between buckets proportional to the bucket (same ratio as an unsampled chart),
     // but never thinner than MIN_SAMPLED_BAR_GAP_PX so it stays visible at every level and zoom.
@@ -83,7 +87,8 @@ export function createGetBucketBarDimensions(params) {
       barWidth,
       offset
     } = getBandSize(bucketStride - gap, numberOfGroups, baseScaleConfig.barGapRatio);
-    const barOffset = groupIndex * (barWidth + offset);
+    // Center the bars in the region (split the gap to both sides) so they sit under the highlight.
+    const barOffset = gap / 2 + groupIndex * (barWidth + offset);
     const valueCoordinates = [valueScale(min), valueScale(max)];
     const [minValueCoord, maxValueCoord] = findMinMax(valueCoordinates).map(v => Math.round(v));
     let barSize = maxValueCoord - minValueCoord;
@@ -91,8 +96,8 @@ export function createGetBucketBarDimensions(params) {
       barSize = Math.max(series.minBarSize, barSize);
     }
     return {
-      x: verticalLayout ? spanStart + barOffset : minValueCoord,
-      y: verticalLayout ? minValueCoord : spanStart + barOffset,
+      x: verticalLayout ? regionStart + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : regionStart + barOffset,
       height: verticalLayout ? barSize : barWidth,
       width: verticalLayout ? barWidth : barSize
     };

package/internals/getSampledBucketRegion.d.mts

@@ -0,0 +1,12 @@
+import type { D3OrdinalScale } from "../models/axis.mjs";
+/**
+ * Computes the band region covered by a sampled bucket spanning `data[startIndex..endIndex]`.
+ *
+ * The region is anchored at its left-most slot and spans whole steps, so both the rendered bar
+ * (see `createGetBucketBarDimensions`) and the axis highlight (see `getSampledBandHighlight`)
+ * stay in sync — on a reversed axis `startIndex` maps to the right, hence the `Math.min`.
+ */
+export declare function getSampledBucketRegion(scale: D3OrdinalScale, data: readonly any[], startIndex: number, endIndex: number): {
+  regionStart: number;
+  regionSize: number;
+};

package/internals/getSampledBucketRegion.d.ts

@@ -0,0 +1,12 @@
+import type { D3OrdinalScale } from "../models/axis.js";
+/**
+ * Computes the band region covered by a sampled bucket spanning `data[startIndex..endIndex]`.
+ *
+ * The region is anchored at its left-most slot and spans whole steps, so both the rendered bar
+ * (see `createGetBucketBarDimensions`) and the axis highlight (see `getSampledBandHighlight`)
+ * stay in sync — on a reversed axis `startIndex` maps to the right, hence the `Math.min`.
+ */
+export declare function getSampledBucketRegion(scale: D3OrdinalScale, data: readonly any[], startIndex: number, endIndex: number): {
+  regionStart: number;
+  regionSize: number;
+};

package/internals/getSampledBucketRegion.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSampledBucketRegion = getSampledBucketRegion;
+/**
+ * Computes the band region covered by a sampled bucket spanning `data[startIndex..endIndex]`.
+ *
+ * The region is anchored at its left-most slot and spans whole steps, so both the rendered bar
+ * (see `createGetBucketBarDimensions`) and the axis highlight (see `getSampledBandHighlight`)
+ * stay in sync — on a reversed axis `startIndex` maps to the right, hence the `Math.min`.
+ */
+function getSampledBucketRegion(scale, data, startIndex, endIndex) {
+  const step = scale.step();
+  const halfPadding = (step - scale.bandwidth()) / 2;
+  const startPos = scale(data[startIndex]);
+  const endPos = scale(data[endIndex]);
+  return {
+    regionStart: Math.min(startPos, endPos) - halfPadding,
+    regionSize: (endIndex - startIndex + 1) * step
+  };
+}

package/internals/getSampledBucketRegion.mjs

@@ -0,0 +1,17 @@
+/**
+ * Computes the band region covered by a sampled bucket spanning `data[startIndex..endIndex]`.
+ *
+ * The region is anchored at its left-most slot and spans whole steps, so both the rendered bar
+ * (see `createGetBucketBarDimensions`) and the axis highlight (see `getSampledBandHighlight`)
+ * stay in sync — on a reversed axis `startIndex` maps to the right, hence the `Math.min`.
+ */
+export function getSampledBucketRegion(scale, data, startIndex, endIndex) {
+  const step = scale.step();
+  const halfPadding = (step - scale.bandwidth()) / 2;
+  const startPos = scale(data[startIndex]);
+  const endPos = scale(data[endIndex]);
+  return {
+    regionStart: Math.min(startPos, endPos) - halfPadding,
+    regionSize: (endIndex - startIndex + 1) * step
+  };
+}

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.d.mts

@@ -5,6 +5,9 @@ import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useCha
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.d.ts

@@ -5,6 +5,9 @@ import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useCha
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.js

@@ -8,6 +8,9 @@ exports.findVisibleDataIndex = findVisibleDataIndex;
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.mjs

@@ -2,6 +2,9 @@
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/snapEndAngleToFullCircle.d.mts

@@ -0,0 +1,20 @@
+/**
+ * Snaps the end angle of an arc to create a full circle when the arc spans almost, but not
+ * exactly, the full circle.
+ *
+ * When an arc spans almost the full circle (e.g., when the remaining slices of a pie are
+ * extremely small compared to the largest one), its start and end points are so close that they
+ * can round to the same path coordinates. SVG omits arcs whose end point equals their start
+ * point, which makes the quasi-full-circle arc invisible.
+ * See https://github.com/mui/mui-x/issues/14167
+ *
+ * The end angle is only snapped when the gap left by the arc is smaller than the precision of
+ * the serialized path, so the snapping is visually lossless.
+ *
+ * @param startAngle The start angle of the arc, in radians.
+ * @param endAngle The end angle of the arc, in radians.
+ * @param outerRadius The outer radius of the arc.
+ * @param padAngle The pad angle of the arc, in radians.
+ * @returns The end angle, snapped to `startAngle ± 2 * Math.PI` when applicable.
+ */
+export declare function snapEndAngleToFullCircle(startAngle: number, endAngle: number, outerRadius: number, padAngle?: number): number;

package/internals/snapEndAngleToFullCircle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Snaps the end angle of an arc to create a full circle when the arc spans almost, but not
+ * exactly, the full circle.
+ *
+ * When an arc spans almost the full circle (e.g., when the remaining slices of a pie are
+ * extremely small compared to the largest one), its start and end points are so close that they
+ * can round to the same path coordinates. SVG omits arcs whose end point equals their start
+ * point, which makes the quasi-full-circle arc invisible.
+ * See https://github.com/mui/mui-x/issues/14167
+ *
+ * The end angle is only snapped when the gap left by the arc is smaller than the precision of
+ * the serialized path, so the snapping is visually lossless.
+ *
+ * @param startAngle The start angle of the arc, in radians.
+ * @param endAngle The end angle of the arc, in radians.
+ * @param outerRadius The outer radius of the arc.
+ * @param padAngle The pad angle of the arc, in radians.
+ * @returns The end angle, snapped to `startAngle ± 2 * Math.PI` when applicable.
+ */
+export declare function snapEndAngleToFullCircle(startAngle: number, endAngle: number, outerRadius: number, padAngle?: number): number;

package/internals/snapEndAngleToFullCircle.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.snapEndAngleToFullCircle = snapEndAngleToFullCircle;
+const TAU = 2 * Math.PI;
+
+/* `d3-shape` serializes paths with a precision of 3 digits, i.e., a resolution of 1e-3. */
+const PATH_PRECISION = 1e-3;
+/* If the distance between the start and end points of an arc is at least twice the path
+ * precision, at least one of their coordinates is guaranteed to round to a different value. */
+const MIN_DISTINCT_CHORD_LENGTH = 2 * PATH_PRECISION;
+
+/**
+ * Snaps the end angle of an arc to create a full circle when the arc spans almost, but not
+ * exactly, the full circle.
+ *
+ * When an arc spans almost the full circle (e.g., when the remaining slices of a pie are
+ * extremely small compared to the largest one), its start and end points are so close that they
+ * can round to the same path coordinates. SVG omits arcs whose end point equals their start
+ * point, which makes the quasi-full-circle arc invisible.
+ * See https://github.com/mui/mui-x/issues/14167
+ *
+ * The end angle is only snapped when the gap left by the arc is smaller than the precision of
+ * the serialized path, so the snapping is visually lossless.
+ *
+ * @param startAngle The start angle of the arc, in radians.
+ * @param endAngle The end angle of the arc, in radians.
+ * @param outerRadius The outer radius of the arc.
+ * @param padAngle The pad angle of the arc, in radians.
+ * @returns The end angle, snapped to `startAngle ± 2 * Math.PI` when applicable.
+ */
+function snapEndAngleToFullCircle(startAngle, endAngle, outerRadius, padAngle = 0) {
+  const sweep = Math.abs(endAngle - startAngle);
+  if (sweep === 0 || sweep >= TAU) {
+    return endAngle;
+  }
+
+  // Chord between the start and end points of the arc, once the padding is applied.
+  // For such small angles, the chord length is approximately `radius * angle`.
+  const gapChordLength = (TAU - sweep + Math.abs(padAngle)) * outerRadius;
+  if (gapChordLength >= MIN_DISTINCT_CHORD_LENGTH) {
+    return endAngle;
+  }
+  return startAngle + Math.sign(endAngle - startAngle) * TAU;
+}

package/internals/snapEndAngleToFullCircle.mjs

@@ -0,0 +1,41 @@
+const TAU = 2 * Math.PI;
+
+/* `d3-shape` serializes paths with a precision of 3 digits, i.e., a resolution of 1e-3. */
+const PATH_PRECISION = 1e-3;
+/* If the distance between the start and end points of an arc is at least twice the path
+ * precision, at least one of their coordinates is guaranteed to round to a different value. */
+const MIN_DISTINCT_CHORD_LENGTH = 2 * PATH_PRECISION;
+
+/**
+ * Snaps the end angle of an arc to create a full circle when the arc spans almost, but not
+ * exactly, the full circle.
+ *
+ * When an arc spans almost the full circle (e.g., when the remaining slices of a pie are
+ * extremely small compared to the largest one), its start and end points are so close that they
+ * can round to the same path coordinates. SVG omits arcs whose end point equals their start
+ * point, which makes the quasi-full-circle arc invisible.
+ * See https://github.com/mui/mui-x/issues/14167
+ *
+ * The end angle is only snapped when the gap left by the arc is smaller than the precision of
+ * the serialized path, so the snapping is visually lossless.
+ *
+ * @param startAngle The start angle of the arc, in radians.
+ * @param endAngle The end angle of the arc, in radians.
+ * @param outerRadius The outer radius of the arc.
+ * @param padAngle The pad angle of the arc, in radians.
+ * @returns The end angle, snapped to `startAngle ± 2 * Math.PI` when applicable.
+ */
+export function snapEndAngleToFullCircle(startAngle, endAngle, outerRadius, padAngle = 0) {
+  const sweep = Math.abs(endAngle - startAngle);
+  if (sweep === 0 || sweep >= TAU) {
+    return endAngle;
+  }
+
+  // Chord between the start and end points of the arc, once the padding is applied.
+  // For such small angles, the chord length is approximately `radius * angle`.
+  const gapChordLength = (TAU - sweep + Math.abs(padAngle)) * outerRadius;
+  if (gapChordLength >= MIN_DISTINCT_CHORD_LENGTH) {
+    return endAngle;
+  }
+  return startAngle + Math.sign(endAngle - startAngle) * TAU;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.10.0",
+  "version": "9.10.1",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -34,9 +34,9 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.2.0",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-charts-vendor": "^9.4.0",
-    "@mui/x-internals": "^9.10.0",
-    "@mui/x-internal-gestures": "^9.10.0"
+    "@mui/x-internals": "^9.10.1",
+    "@mui/x-internal-gestures": "^9.10.0",
+    "@mui/x-charts-vendor": "^9.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",