@mui/x-charts 8.11.2 → 8.12.0

package/ScatterChart/Scatter.js

@@ -16,11 +16,12 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
-var _useChartVoronoi = require("../internals/plugins/featurePlugins/useChartVoronoi");
+var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _ScatterMarker = require("./ScatterMarker");
 var _scatterClasses = require("./scatterClasses");
 var _useScatterPlotData = require("./useScatterPlotData");
 var _ChartProvider = require("../context/ChartProvider");
+var _useIsItemFocusedGetter = require("../hooks/useIsItemFocusedGetter");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -49,12 +50,13 @@ function Scatter(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartVoronoi.selectorChartsVoronoiIsVoronoiEnabled);
+  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartClosestPoint.selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const {
     isFaded,
     isHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const isFocused = (0, _useIsItemFocusedGetter.useIsItemFocusedGetter)();
   const scatterPlotData = (0, _useScatterPlotData.useScatterPlotData)(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? _ScatterMarker.ScatterMarker;
   const _useSlotProps = (0, _useSlotProps2.default)({
@@ -71,12 +73,17 @@ function Scatter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
     className: classes.root,
-    children: scatterPlotData.map((dataPoint, i) => {
+    children: scatterPlotData.map(dataPoint => {
       const isItemHighlighted = isHighlighted(dataPoint);
       const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const isItemFocused = isFocused({
+        seriesType: 'scatter',
+        seriesId: series.id,
+        dataIndex: dataPoint.dataIndex
+      });
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
         dataIndex: dataPoint.dataIndex,
-        color: colorGetter ? colorGetter(i) : color,
+        color: colorGetter ? colorGetter(dataPoint.dataIndex) : color,
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -87,7 +94,8 @@ function Scatter(props) {
           dataIndex: dataPoint.dataIndex
         })),
         "data-highlighted": isItemHighlighted || undefined,
-        "data-faded": isItemFaded || undefined
+        "data-faded": isItemFaded || undefined,
+        "data-focused": isItemFocused || undefined
       }, skipInteractionHandlers ? undefined : (0, _useInteractionItemProps.getInteractionItemProps)(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
     })
   });

package/ScatterChart/ScatterChart.d.ts

@@ -13,8 +13,8 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+import { ScatterChartPluginSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
   /**
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -69,7 +69,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
-  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartVoronoiSignature['params']['onItemClick'];
+  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];
 }
 /**
  * Demos:

package/ScatterChart/ScatterChart.js

@@ -110,6 +110,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableVoronoi: _propTypes.default.bool,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -178,6 +179,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -207,10 +217,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: _propTypes.default.number,
+  voronoiMaxRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/ScatterChart/ScatterChart.plugins.d.ts

@@ -3,6 +3,7 @@ import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlug
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-export type ScatterChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
-export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginsSignatures>;
+import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.js

@@ -8,5 +8,6 @@ var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis"
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-var _useChartVoronoi = require("../internals/plugins/featurePlugins/useChartVoronoi");
-const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartVoronoi.useChartVoronoi];
+var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/ScatterChart/ScatterPlot.d.ts

@@ -6,6 +6,7 @@ export interface ScatterPlotSlots extends ScatterSlots {
 export interface ScatterPlotSlotProps extends ScatterSlotProps {
   scatter?: Partial<ScatterProps>;
 }
+export type RendererType = 'svg-single' | 'svg-batch';
 export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
   /**
    * Overridable component slots.
@@ -17,6 +18,15 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
    * @default {}
    */
   slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
 }
 /**
  * Demos:

package/ScatterChart/ScatterPlot.js

@@ -15,6 +15,7 @@ var _useScatterSeries = require("../hooks/useScatterSeries");
 var _hooks = require("../hooks");
 var _useZAxis = require("../hooks/useZAxis");
 var _seriesConfig = require("./seriesConfig");
+var _BatchScatter = require("./BatchScatter");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -30,7 +31,8 @@ function ScatterPlot(props) {
   const {
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    renderer
   } = props;
   const seriesData = (0, _useScatterSeries.useScatterSeriesContext)();
   const {
@@ -55,7 +57,8 @@ function ScatterPlot(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const defaultZAxisId = zAxisIds[0];
-  const ScatterItems = slots?.scatter ?? _Scatter.Scatter;
+  const DefaultScatterItems = renderer === 'svg-batch' ? _BatchScatter.BatchScatter : _Scatter.Scatter;
+  const ScatterItems = slots?.scatter ?? DefaultScatterItems;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesOrder.map(seriesId => {
       const {
@@ -92,6 +95,15 @@ process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
   /**
    * The props used for each component slot.
    * @default {}

package/ScatterChart/index.d.ts

@@ -3,5 +3,6 @@ export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
+export * from "./ScatterChart.plugins.js";
 export type { ScatterClasses } from "./scatterClasses.js";
 export { scatterClasses } from "./scatterClasses.js";

package/ScatterChart/index.js

@@ -72,4 +72,16 @@ Object.keys(_ScatterMarker2).forEach(function (key) {
     }
   });
 });
+var _ScatterChart2 = require("./ScatterChart.plugins");
+Object.keys(_ScatterChart2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ScatterChart2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScatterChart2[key];
+    }
+  });
+});
 var _scatterClasses = require("./scatterClasses");

package/ScatterChart/useScatterChartProps.d.ts

@@ -8,7 +8,7 @@ import { ChartContainerProps } from "../ChartContainer/index.js";
 import type { ScatterChartProps } from "./ScatterChart.js";
 import type { ScatterPlotProps } from "./ScatterPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+import { ScatterChartPluginSignatures } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -18,7 +18,7 @@ import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginSignatures>;
   chartsAxisProps: ChartsAxisProps;
   gridProps: ChartsGridProps;
   scatterPlotProps: ScatterPlotProps;

package/ScatterChart/useScatterChartProps.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _ScatterChart = require("./ScatterChart.plugins");
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -41,12 +41,14 @@ const useScatterChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      renderer
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
     type: 'scatter'
   }, s)), [series]);
+  const useVoronoiOnItemClick = disableVoronoi !== true || renderer === 'svg-batch';
   const chartContainerProps = (0, _extends2.default)({}, other, {
     series: seriesWithDefault,
     width,
@@ -60,7 +62,7 @@ const useScatterChartProps = props => {
     onHighlightChange,
     disableVoronoi,
     voronoiMaxRadius,
-    onItemClick: disableVoronoi ? undefined : onItemClick,
+    onItemClick: useVoronoiOnItemClick ? onItemClick : undefined,
     className,
     plugins: _ScatterChart.SCATTER_CHART_PLUGINS,
     slots,
@@ -75,9 +77,10 @@ const useScatterChartProps = props => {
     horizontal: grid?.horizontal
   };
   const scatterPlotProps = {
-    onItemClick: disableVoronoi ? onItemClick : undefined,
+    onItemClick: useVoronoiOnItemClick ? undefined : onItemClick,
     slots,
-    slotProps
+    slotProps,
+    renderer
   };
   const overlayProps = {
     loading,
@@ -95,7 +98,8 @@ const useScatterChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   return {
     chartsWrapperProps,

package/SparkLineChart/SparkLineChart.js

@@ -20,6 +20,7 @@ var _ChartsSurface = require("../ChartsSurface");
 var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
+var _FocusedMark = require("../LineChart/FocusedMark");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "baseline", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className", "disableClipping", "clipAreaOffset", "onHighlightChange", "onHighlightedAxisChange", "highlightedAxis", "highlightedItem"];
 const SPARK_LINE_DEFAULT_MARGIN = 5;
@@ -144,9 +145,11 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
             slotProps: slotProps
           })]
         })]
-      }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
-        slots: slots,
-        slotProps: slotProps
+      }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMark.FocusedMark, {})]
       }), disableClipping ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
         id: clipPathId,
         offset: clipPathOffset
@@ -232,6 +235,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * If true, the voronoi interaction are ignored.
    */
   disableVoronoi: _propTypes.default.bool,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -345,10 +349,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   valueFormatter: _propTypes.default.func,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: _propTypes.default.number,
+  voronoiMaxRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/colorPalettes/types.d.ts

@@ -1,4 +1,4 @@
 export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
-export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+export type ChartsColorPalette = readonly string[] | ChartsColorPaletteCallback;
 export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
 export type ChartsColor = string | ChartsColorCallback;

package/context/ChartApi.d.ts

@@ -1,14 +1,14 @@
 import type { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
-import type { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
-import type { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
-import type { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
+import type { BarChartPluginSignatures } from "../BarChart/BarChart.plugins.js";
+import type { ScatterChartPluginSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import type { LineChartPluginSignatures } from "../LineChart/LineChart.plugins.js";
 import type { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
 import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import type { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type PluginsPerSeriesType = {
-  line: LineChartPluginsSignatures;
-  scatter: ScatterChartPluginsSignatures;
-  bar: BarChartPluginsSignatures;
+  line: LineChartPluginSignatures;
+  scatter: ScatterChartPluginSignatures;
+  bar: BarChartPluginSignatures;
   pie: PieChartPluginSignatures;
   composition: DefaultPluginSignatures;
 };

package/esm/BarChart/BarChart.d.ts

@@ -12,11 +12,11 @@ import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
-import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
+import { BarChartPluginSignatures } from "./BarChart.plugins.js";
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type BarSeries = MakeOptional<BarSeriesType, 'type'>;
-export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'experimentalFeatures'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'experimentalFeatures'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] objects.

package/esm/BarChart/BarChart.js

@@ -112,6 +112,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/esm/BarChart/BarChart.plugins.d.ts

@@ -2,6 +2,7 @@ import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useC
 import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type BarChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature];
-export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginsSignatures>;
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/esm/BarChart/BarChart.plugins.js

@@ -2,4 +2,5 @@ import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis
 import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const BAR_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];
+import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export const BAR_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/BarChart/BarElement.js

@@ -10,6 +10,7 @@ import { useUtilityClasses } from "./barElementClasses.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { AnimatedBarElement } from "./AnimatedBarElement.js";
+import { useIsItemFocused } from "../hooks/useIsItemFocused.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function BarElement(props) {
   const {
@@ -43,13 +44,19 @@ function BarElement(props) {
     seriesId: id,
     dataIndex
   });
+  const isFocused = useIsItemFocused({
+    seriesType: 'bar',
+    seriesId: id,
+    dataIndex
+  });
   const ownerState = {
     id,
     dataIndex,
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    isFocused
   };
   const classes = useUtilityClasses(ownerState);
   const Bar = slots?.bar ?? AnimatedBarElement;
@@ -73,7 +80,8 @@ function BarElement(props) {
       stroke: 'none',
       fill: color,
       skipAnimation,
-      layout
+      layout,
+      'data-focused': isFocused || undefined
     }),
     className: classes.root,
     ownerState

package/esm/BarChart/index.d.ts

@@ -3,5 +3,7 @@ export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
 export * from "./barElementClasses.js";
+export * from "./BarChart.plugins.js";
+export { type BarProps } from "./AnimatedBarElement.js";
 export { barClasses, getBarUtilityClass } from "./barClasses.js";
 export type { BarClassKey, BarClasses } from "./barClasses.js";

package/esm/BarChart/index.js

@@ -3,4 +3,5 @@ export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
 export * from "./barElementClasses.js";
+export * from "./BarChart.plugins.js";
 export { barClasses, getBarUtilityClass } from "./barClasses.js";

package/esm/BarChart/useBarChartProps.d.ts

@@ -9,7 +9,7 @@ import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
+import { BarChartPluginSignatures } from "./BarChart.plugins.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -19,7 +19,7 @@ import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
  */
 export declare const useBarChartProps: (props: BarChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"bar", BarChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProps<"bar", BarChartPluginSignatures>;
   barPlotProps: BarPlotProps;
   gridProps: ChartsGridProps;
   clipPathProps: ChartsClipPathProps;

package/esm/BarChart/useBarChartProps.js

@@ -41,7 +41,7 @@ export const useBarChartProps = props => {
       barLabel,
       className
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -82,7 +82,7 @@ export const useBarChartProps = props => {
       scaleType: 'band'
     }, axis)) : yAxis;
   }, [defaultYAxis, hasHorizontalSeries, yAxis]);
-  const chartContainerProps = _extends({}, rest, {
+  const chartContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -136,7 +136,8 @@ export const useBarChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   return {
     chartsWrapperProps,

package/esm/ChartContainer/ChartContainer.js

@@ -76,6 +76,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If true, the voronoi interaction are ignored.
    */
   disableVoronoi: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */
@@ -658,10 +659,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: PropTypes.number,
+  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/esm/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -37,7 +37,8 @@ export const useChartContainerProps = (props, ref) => {
       localeText,
       slots,
       slotProps,
-      experimentalFeatures
+      experimentalFeatures,
+      enableKeyboardNavigation
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
@@ -71,6 +72,7 @@ export const useChartContainerProps = (props, ref) => {
     localeText,
     seriesConfig,
     experimentalFeatures,
+    enableKeyboardNavigation,
     plugins: plugins ?? DEFAULT_PLUGINS,
     slots,
     slotProps

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -35,15 +35,15 @@ export default function ChartsXHighlight(props) {
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = getValueToPositionMapper(xScale);
-    const isBandScaleX = type === 'band' && value !== null && isBandScale(xScale);
+    const isXScaleOrdinal = type === 'band' && value !== null && isOrdinalScale(xScale);
     if (process.env.NODE_ENV !== 'production') {
-      const isError = isBandScaleX && xScale(value) === undefined;
+      const isError = isXScaleOrdinal && xScale(value) === undefined;
       if (isError) {
         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'));
       }
     }
     return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      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`,
         className: classes.root,
         ownerState: {