@mui/x-charts 9.10.0 → 9.11.0

package/ScatterChart/ScatterChart.mjs

@@ -142,6 +142,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
    * Options to enable features planned for the next major.
    */
   experimentalFeatures: PropTypes.shape({
+    keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
   /**

package/ScatterChart/async/ScatterAsync.js

@@ -15,6 +15,7 @@ var _useStore = require("../../internals/store/useStore");
 var _useProgressiveRendering = require("../../internals/plugins/featurePlugins/useProgressiveRendering");
 var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _scatterRenderData = require("./scatterRenderData.selectors");
+var _useRegisterItemActivation = require("../../internals/useRegisterItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 /** Per-series points sampled while interacting; the rest fills in on settle. */const INTERACTION_POINT_BUDGET = 2000;
 
@@ -57,6 +58,14 @@ function ScatterAsync(props) {
   // `count` (total points) is constant across zoom/pan, so the sampled set is
   // stable while panning.
   const interactionStep = getInteractionStep(count, nBatches, INTERACTION_POINT_BUDGET);
+  (0, _useRegisterItemActivation.useRegisterItemActivation)({
+    type: 'scatter',
+    seriesId: series.id
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'scatter',
+    seriesId: series.id,
+    dataIndex: item.dataIndex
+  })));
   const batches = [];
   for (let b = 0; b < mountedBatches; b += 1) {
     batches.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterAsyncBatch.ScatterAsyncBatch, {

package/ScatterChart/async/ScatterAsync.mjs

@@ -7,6 +7,7 @@ import { useStore } from "../../internals/store/useStore.mjs";
 import { selectorProgressiveBatchSize, selectorProgressiveSeriesRevealedBatches } from "../../internals/plugins/featurePlugins/useProgressiveRendering/index.mjs";
 import { selectorChartZoomIsInteracting } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { selectorScatterSeriesRenderData } from "./scatterRenderData.selectors.mjs";
+import { useRegisterItemActivation } from "../../internals/useRegisterItemActivation.mjs";
 
 /** Per-series points sampled while interacting; the rest fills in on settle. */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -51,6 +52,14 @@ function ScatterAsync(props) {
   // `count` (total points) is constant across zoom/pan, so the sampled set is
   // stable while panning.
   const interactionStep = getInteractionStep(count, nBatches, INTERACTION_POINT_BUDGET);
+  useRegisterItemActivation({
+    type: 'scatter',
+    seriesId: series.id
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'scatter',
+    seriesId: series.id,
+    dataIndex: item.dataIndex
+  })));
   const batches = [];
   for (let b = 0; b < mountedBatches; b += 1) {
     batches.push(/*#__PURE__*/_jsx(ScatterAsyncBatch, {

package/SparkLineChart/SparkLineChart.js

@@ -256,6 +256,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
    */
   experimentalFeatures: _propTypes.default.shape({
     enablePositionBasedPointerInteraction: _propTypes.default.bool,
+    keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
   /**
@@ -478,7 +479,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
-   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ChartsActivationEvent} event Event caught at the svg level
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: _propTypes.default.func,

package/SparkLineChart/SparkLineChart.mjs

@@ -249,6 +249,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
    */
   experimentalFeatures: PropTypes.shape({
     enablePositionBasedPointerInteraction: PropTypes.bool,
+    keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
   /**
@@ -471,7 +472,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
-   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ChartsActivationEvent} event Event caught at the svg level
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: PropTypes.func,

package/Toolbar/ToolbarButton.js

@@ -16,7 +16,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
   _excluded2 = ["tabIndex"];
 const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
   const {

package/Toolbar/ToolbarButton.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
   _excluded2 = ["tabIndex"];
 import PropTypes from 'prop-types';
 import * as React from 'react';

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/hooks/useFocusedItem.d.mts

@@ -1,4 +1,4 @@
 /**
  * Get the focused item from keyboard navigation.
  */
-export declare function useFocusedItem(): import("../index.mjs").FocusedItemIdentifier<keyof import("../internals/index.mjs").ChartsSeriesConfig> | null;
+export declare function useFocusedItem(): import("@mui/x-charts/models").FocusedItemIdentifier<keyof import("../internals/index.mjs").ChartsSeriesConfig> | null;

package/hooks/useFocusedItem.d.ts

@@ -1,4 +1,4 @@
 /**
  * Get the focused item from keyboard navigation.
  */
-export declare function useFocusedItem(): import("../index.js").FocusedItemIdentifier<keyof import("../internals/index.js").ChartsSeriesConfig> | null;
+export declare function useFocusedItem(): import("@mui/x-charts/models").FocusedItemIdentifier<keyof import("../internals/index.js").ChartsSeriesConfig> | null;

package/hooks/useItemHighlightStateGetter.d.mts

@@ -6,4 +6,4 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
  *
  * @returns {(item: HighlightItemIdentifierWithType | null) => HighlightState} callback to get the highlight state of an item.
  */
-export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("../index.mjs").HighlightItemIdentifierWithType<import("../internals/index.mjs").ComposableChartSeriesType<keyof import("../internals/index.mjs").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.mjs").HighlightState;
+export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("@mui/x-charts/models").HighlightItemIdentifierWithType<import("../internals/index.mjs").ComposableChartSeriesType<keyof import("../internals/index.mjs").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.mjs").HighlightState;

package/hooks/useItemHighlightStateGetter.d.ts

@@ -6,4 +6,4 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
  *
  * @returns {(item: HighlightItemIdentifierWithType | null) => HighlightState} callback to get the highlight state of an item.
  */
-export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("../index.js").HighlightItemIdentifierWithType<import("../internals/index.js").ComposableChartSeriesType<keyof import("../internals/index.js").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.js").HighlightState;
+export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("@mui/x-charts/models").HighlightItemIdentifierWithType<import("../internals/index.js").ComposableChartSeriesType<keyof import("../internals/index.js").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.js").HighlightState;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.10.0
+ * @mui/x-charts v9.11.0
  *
  * @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.11.0
  *
  * @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/createCommonKeyboardFocusHandler.d.mts

@@ -4,7 +4,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
  */
 export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
   type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
-  seriesId: import("../index.mjs").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex?: number;
 } | null, state: {
   series: {
@@ -14,6 +14,6 @@ export declare function createCommonKeyboardFocusHandler<SeriesType extends Excl
   };
 }) => {
   type: SeriesType;
-  seriesId: import("../index.mjs").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex: number;
 } | null) | null;

package/internals/createCommonKeyboardFocusHandler.d.ts

@@ -4,7 +4,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
  */
 export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
   type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
-  seriesId: import("../index.js").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex?: number;
 } | null, state: {
   series: {
@@ -14,6 +14,6 @@ export declare function createCommonKeyboardFocusHandler<SeriesType extends Excl
   };
 }) => {
   type: SeriesType;
-  seriesId: import("../index.js").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex: number;
 } | null) | null;

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/index.d.mts

@@ -76,6 +76,7 @@ export * from "./scaleGuards.mjs";
 export * from "./findMinMax.mjs";
 export * from "./commonNextFocusItem.mjs";
 export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.mjs";
+export { useRegisterItemActivation } from "./useRegisterItemActivation.mjs";
 export { getSeriesColorFn } from "./getSeriesColorFn.mjs";
 export { resolveColorProcessor } from "./resolveColorProcessor.mjs";
 export { processLineLikeSeries } from "./processLineLikeSeries.mjs";

package/internals/index.d.ts

@@ -76,6 +76,7 @@ export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
 export * from "./commonNextFocusItem.js";
 export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.js";
+export { useRegisterItemActivation } from "./useRegisterItemActivation.js";
 export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { resolveColorProcessor } from "./resolveColorProcessor.js";
 export { processLineLikeSeries } from "./processLineLikeSeries.js";

package/internals/index.js

@@ -23,6 +23,7 @@ var _exportNames = {
   getCartesianAxisIndex: true,
   getRotationAxisIndex: true,
   createCommonKeyboardFocusHandler: true,
+  useRegisterItemActivation: true,
   getSeriesColorFn: true,
   resolveColorProcessor: true,
   processLineLikeSeries: true,
@@ -186,6 +187,12 @@ Object.defineProperty(exports, "useRadarChartProps", {
     return _useRadarChartProps.useRadarChartProps;
   }
 });
+Object.defineProperty(exports, "useRegisterItemActivation", {
+  enumerable: true,
+  get: function () {
+    return _useRegisterItemActivation.useRegisterItemActivation;
+  }
+});
 Object.defineProperty(exports, "useRegisterPointerInteractions", {
   enumerable: true,
   get: function () {
@@ -953,6 +960,7 @@ Object.keys(_commonNextFocusItem).forEach(function (key) {
   });
 });
 var _createCommonKeyboardFocusHandler = require("./createCommonKeyboardFocusHandler");
+var _useRegisterItemActivation = require("./useRegisterItemActivation");
 var _getSeriesColorFn = require("./getSeriesColorFn");
 var _resolveColorProcessor = require("./resolveColorProcessor");
 var _processLineLikeSeries = require("./processLineLikeSeries");

package/internals/index.mjs

@@ -84,6 +84,7 @@ export * from "./scaleGuards.mjs";
 export * from "./findMinMax.mjs";
 export * from "./commonNextFocusItem.mjs";
 export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.mjs";
+export { useRegisterItemActivation } from "./useRegisterItemActivation.mjs";
 export { getSeriesColorFn } from "./getSeriesColorFn.mjs";
 export { resolveColorProcessor } from "./resolveColorProcessor.mjs";
 export { processLineLikeSeries } from "./processLineLikeSeries.mjs";

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.mts

@@ -1,5 +1,12 @@
 import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+interface CommonExperimentalFeatures {
+  /**
+   * Enables activating the keyboard-focused item with <kbd>Enter</kbd> or <kbd>Space</kbd>,
+   * firing `onItemClick` and `onAxisClick` as a pointer click would.
+   */
+  keyboardActivation?: boolean;
+}
 interface LineExperimentalFeatures {
   /**
    * Enables pointer-based interaction detection for line and area series.
@@ -27,7 +34,7 @@ interface ScatterExperimentalFeatures {
    */
   progressiveRendering?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = CommonExperimentalFeatures & ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -1,5 +1,12 @@
 import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+interface CommonExperimentalFeatures {
+  /**
+   * Enables activating the keyboard-focused item with <kbd>Enter</kbd> or <kbd>Space</kbd>,
+   * firing `onItemClick` and `onAxisClick` as a pointer click would.
+   */
+  keyboardActivation?: boolean;
+}
 interface LineExperimentalFeatures {
   /**
    * Enables pointer-based interaction detection for line and area series.
@@ -27,7 +34,7 @@ interface ScatterExperimentalFeatures {
    */
   progressiveRendering?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = CommonExperimentalFeatures & ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -32,7 +32,10 @@ const useChartInteractionListener = ({
           preventIf: ['pan', 'zoomPinch', 'zoomPan']
         }), new _core.TapGesture({
           name: 'tap',
-          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+          // `pan` is intentionally omitted: it has `threshold: 0`, so any pointer drift during a
+          // click activates it and would cancel the tap, discarding the click. The tap's own
+          // `maxDistance` already discriminates a click from a drag. See https://github.com/mui/mui-x/issues/20364
+          preventIf: ['zoomPinch', 'zoomPan']
         }), new _core.PressGesture({
           name: 'quickPress',
           duration: 50
@@ -51,8 +54,13 @@ const useChartInteractionListener = ({
     }
     gestureManager.registerElement(['pan', 'move', 'tap', 'quickPress', 'brush'], svg);
     return () => {
-      // Cleanup gesture manager
-      gestureManager.unregisterAllGestures(svg);
+      // Cleanup gesture manager. `destroy()` unregisters every element's gestures like
+      // `unregisterAllGestures()` does, and is additionally the only path that removes the
+      // document/window listeners owned by the internal PointerManager and KeyboardManager.
+      gestureManager.destroy();
+      // The manager is unusable once destroyed, so drop it and let the next mount build a
+      // fresh one. Reusing a destroyed manager loses its gesture templates.
+      gestureManagerRef.current = null;
     };
   }, [chartsLayerContainerRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {