@mui/x-charts 8.11.3 → 8.13.0

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,6 +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/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/ChartsLegend/ContinuousColorLegend.js

@@ -66,6 +66,7 @@ const RootElement = styled('ul', {
   paddingInlineStart: 0,
   marginBlock: theme.spacing(1),
   marginInline: theme.spacing(1),
+  gridArea: 'legend',
   [`&.${continuousColorLegendClasses.horizontal}`]: {
     gridTemplateRows: 'min-content min-content',
     gridTemplateColumns: 'min-content auto min-content',

package/esm/ChartsLegend/PiecewiseColorLegend.js

@@ -34,6 +34,7 @@ const RootElement = styled('ul', {
     marginBlock: theme.spacing(1),
     marginInline: theme.spacing(1),
     width: 'fit-content',
+    gridArea: 'legend',
     [`button.${classes.item}`]: {
       // Reset button styles
       background: 'none',

package/esm/ChartsSurface/ChartsSurface.js

@@ -12,12 +12,14 @@ import { useSvgRef } from "../hooks/useSvgRef.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartContainerSize, selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(({
-  ownerState
+  ownerState,
+  theme
 }) => ({
   width: ownerState.width ?? '100%',
   height: ownerState.height ?? '100%',
@@ -31,7 +33,21 @@ const ChartsSurfaceStyles = styled('svg', {
   // For example, prevent page scroll & zoom.
   touchAction: 'pan-y',
   userSelect: 'none',
-  gridArea: 'chart'
+  gridArea: 'chart',
+  '&:focus': {
+    outline: 'none' // By default don't show focus on the SVG container
+  },
+  '&:focus-visible': {
+    // Show focus outline on the SVG container only when using keyboard navigation
+    outline: `${(theme.vars ?? theme).palette.text.primary} solid 2px`,
+    '&[data-has-focused-item=true]': {
+      // But not if the chart has a focused children item
+      outline: 'none'
+    }
+  },
+  '& [data-focused=true]': {
+    outline: `${(theme.vars ?? theme).palette.text.primary} solid 2px`
+  }
 }));
 
 /**
@@ -58,6 +74,8 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     width: propsWidth,
     height: propsHeight
   } = useSelector(store, selectorChartPropsSize);
+  const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
@@ -78,7 +96,9 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
       height: propsHeight
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
-    className: className
+    className: className,
+    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined,
+    "data-has-focused-item": hasFocusedItem || undefined
   }, other, {
     ref: handleRef,
     children: [title && /*#__PURE__*/_jsx("title", {

package/esm/ChartsWrapper/ChartsWrapper.d.ts

@@ -15,8 +15,9 @@ export interface ChartsWrapperProps {
   legendDirection?: Direction;
   /**
    * If `true`, the legend is not rendered.
+   * @default false
    */
-  hideLegend: boolean;
+  hideLegend?: boolean;
   /**
    * If `true`, the chart wrapper set `height: 100%`.
    * @default `false` if the `height` prop is set. And `true` otherwise.

package/esm/ChartsWrapper/ChartsWrapper.js

@@ -26,10 +26,6 @@ const getAlignItems = position => {
   }
   return 'center';
 };
-const addToolbar = template => {
-  return `"toolbar"
-          ${template}`;
-};
 const getGridTemplateAreas = (hideLegend, direction, position) => {
   if (hideLegend) {
     return `"chart"`;
@@ -47,26 +43,25 @@ const getGridTemplateAreas = (hideLegend, direction, position) => {
   return `"legend"
           "chart"`;
 };
-const getTemplateColumns = (hideLegend, direction, position, width) => {
-  if (direction === 'vertical') {
-    if (hideLegend) {
-      return '1fr';
-    }
-    if (position?.horizontal === 'start') {
-      return 'auto 1fr';
-    }
-    return `${width ? 'auto' : '1fr'} auto`;
+const getTemplateColumns = (hideLegend = false, direction = 'horizontal', horizontalPosition = 'end', width = undefined) => {
+  const drawingAreaColumn = width ? 'auto' : '1fr';
+  if (direction === 'horizontal') {
+    return drawingAreaColumn;
+  }
+  if (hideLegend) {
+    return drawingAreaColumn;
   }
-  return '100%';
+  return horizontalPosition === 'start' ? `auto ${drawingAreaColumn}` : `${drawingAreaColumn} auto`;
 };
-const getTemplateRows = (hideLegend, direction) => {
+const getTemplateRows = (hideLegend = false, direction = 'horizontal', verticalPosition = 'top') => {
+  const drawingAreaRow = '1fr';
   if (direction === 'vertical') {
-    if (hideLegend) {
-      return 'auto';
-    }
-    return 'auto 1fr';
+    return drawingAreaRow;
+  }
+  if (hideLegend) {
+    return drawingAreaRow;
   }
-  return 'auto 1fr';
+  return verticalPosition === 'bottom' ? `${drawingAreaRow} auto` : `auto ${drawingAreaRow}`;
 };
 const Root = styled('div', {
   name: 'MuiChartsWrapper',
@@ -75,32 +70,39 @@ const Root = styled('div', {
 })(({
   ownerState,
   width
-}) => ({
-  variants: [{
-    props: {
-      extendVertically: true
+}) => {
+  const gridTemplateColumns = getTemplateColumns(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition?.horizontal, width);
+  const gridTemplateRows = getTemplateRows(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition?.vertical);
+  const gridTemplateAreas = getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition);
+  return {
+    variants: [{
+      props: {
+        extendVertically: true
+      },
+      style: {
+        height: '100%'
+      }
+    }],
+    flex: 1,
+    display: 'grid',
+    gridTemplateColumns,
+    gridTemplateRows,
+    gridTemplateAreas,
+    [`&:has(.${chartsToolbarClasses.root})`]: {
+      // Add a row for toolbar if there is one.
+      gridTemplateRows: `auto ${gridTemplateRows}`,
+      gridTemplateAreas: `"${gridTemplateColumns.split(' ').map(() => 'toolbar').join(' ')}"
+        ${gridTemplateAreas}`
     },
-    style: {
-      height: '100%'
-    }
-  }],
-  flex: 1,
-  display: 'grid',
-  gridTemplateColumns: getTemplateColumns(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition, width),
-  gridTemplateRows: getTemplateRows(ownerState.hideLegend, ownerState.legendDirection),
-  [`&:has(.${chartsToolbarClasses.root})`]: {
-    gridTemplateAreas: addToolbar(getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition))
-  },
-  [`&:not(:has(.${chartsToolbarClasses.root}))`]: {
-    gridTemplateAreas: getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition)
-  },
-  justifyContent: 'center',
-  justifyItems: getJustifyItems(ownerState.legendPosition),
-  alignItems: getAlignItems(ownerState.legendPosition),
-  [`& > .${chartsToolbarClasses.root}`]: {
-    justifySelf: 'center'
-  }
-}));
+    [`& .${chartsToolbarClasses.root}`]: {
+      gridArea: 'toolbar',
+      justifySelf: 'center'
+    },
+    justifyContent: 'center',
+    justifyItems: getJustifyItems(ownerState.legendPosition),
+    alignItems: getAlignItems(ownerState.legendPosition)
+  };
+});
 
 /**
  * Wrapper for the charts components.
@@ -140,8 +142,9 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
   extendVertically: PropTypes.bool,
   /**
    * If `true`, the legend is not rendered.
+   * @default false
    */
-  hideLegend: PropTypes.bool.isRequired,
+  hideLegend: PropTypes.bool,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/esm/ChartsXAxis/useAxisTicksProps.d.ts

@@ -3685,9 +3685,11 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     x?: number | string | undefined | undefined;
     y?: number | string | undefined | undefined;
     radius?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
     media?: string | undefined | undefined;
-    method?: string | undefined | undefined;
     target?: string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    method?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     accumulate?: "none" | "sum" | undefined | undefined;
@@ -3731,7 +3733,6 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     focusable?: "auto" | (boolean | "true" | "false") | undefined;
     format?: number | string | undefined | undefined;
     fr?: number | string | undefined | undefined;
-    from?: number | string | undefined | undefined;
     fx?: number | string | undefined | undefined;
     fy?: number | string | undefined | undefined;
     g1?: number | string | undefined | undefined;
@@ -3744,7 +3745,6 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     hanging?: number | string | undefined | undefined;
     horizAdvX?: number | string | undefined | undefined;
     horizOriginX?: number | string | undefined | undefined;
-    href?: string | undefined | undefined;
     ideographic?: number | string | undefined | undefined;
     in2?: number | string | undefined | undefined;
     in?: string | undefined | undefined;

package/esm/ChartsYAxis/useAxisTicksProps.d.ts

@@ -3604,9 +3604,11 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     x?: number | string | undefined | undefined;
     y?: number | string | undefined | undefined;
     radius?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
     media?: string | undefined | undefined;
-    method?: string | undefined | undefined;
     target?: string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    method?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     accumulate?: "none" | "sum" | undefined | undefined;
@@ -3650,7 +3652,6 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     focusable?: "auto" | (boolean | "true" | "false") | undefined;
     format?: number | string | undefined | undefined;
     fr?: number | string | undefined | undefined;
-    from?: number | string | undefined | undefined;
     fx?: number | string | undefined | undefined;
     fy?: number | string | undefined | undefined;
     g1?: number | string | undefined | undefined;
@@ -3663,7 +3664,6 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     hanging?: number | string | undefined | undefined;
     horizAdvX?: number | string | undefined | undefined;
     horizOriginX?: number | string | undefined | undefined;
-    href?: string | undefined | undefined;
     ideographic?: number | string | undefined | undefined;
     in2?: number | string | undefined | undefined;
     in?: string | undefined | undefined;

package/esm/LineChart/FocusedMark.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedMark(): React.JSX.Element | null;

package/esm/LineChart/FocusedMark.js

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RADIUS = 6;
+export function FocusedMark() {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const lineSeries = useLineSeriesContext();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  if (focusedItem === null || focusedItem.seriesType !== 'line' || !lineSeries) {
+    return null;
+  }
+  const series = lineSeries?.series[focusedItem.seriesId];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  return /*#__PURE__*/_jsx("rect", {
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: xAxis[xAxisId].scale(xAxis[xAxisId].data[focusedItem.dataIndex]) - RADIUS,
+    y: yAxis[yAxisId].scale(series.stackedData[focusedItem.dataIndex][1]) - RADIUS,
+    width: 2 * RADIUS,
+    height: 2 * RADIUS,
+    rx: 3,
+    ry: 3
+  });
+}

package/esm/LineChart/LineChart.d.ts

@@ -14,12 +14,12 @@ import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+import { LineChartPluginSignatures } from "./LineChart.plugins.js";
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
-export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
    * An array of [[LineSeries]] objects.

package/esm/LineChart/LineChart.js

@@ -20,6 +20,7 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../ChartsWrapper/index.js";
+import { FocusedMark } from "./FocusedMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -63,7 +64,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(FocusedMark, {}), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -111,6 +112,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */

package/esm/LineChart/LineChart.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 LineChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature];
-export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginsSignatures>;
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/esm/LineChart/LineChart.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 LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];
+import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/LineChart/index.d.ts

@@ -9,5 +9,6 @@ export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
 export * from "./LineHighlightElement.js";
+export * from "./LineChart.plugins.js";
 export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
 export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/esm/LineChart/index.js

@@ -9,4 +9,5 @@ export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
 export * from "./LineHighlightElement.js";
+export * from "./LineChart.plugins.js";
 export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/esm/LineChart/useLineChartProps.d.ts

@@ -12,7 +12,7 @@ import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
 import { LinePlotProps } from "./LinePlot.js";
 import { MarkPlotProps } from "./MarkPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+import { LineChartPluginSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -22,7 +22,7 @@ import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"line", LineChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProps<"line", LineChartPluginSignatures>;
   gridProps: ChartsGridProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {

package/esm/PieChart/PieArc.d.ts

@@ -12,6 +12,8 @@ export interface PieArcClasses {
    * Needs to be suffixed with the series ID: `.${pieArcClasses.series}-${seriesId}`.
    */
   series: string;
+  /** Styles applied to the focus indicator element. */
+  focusIndicator: string;
 }
 export type PieArcClassKey = keyof PieArcClasses;
 interface PieArcOwnerState {
@@ -20,6 +22,8 @@ interface PieArcOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
+  stroke?: string;
   classes?: Partial<PieArcClasses>;
 }
 export declare function getPieArcUtilityClass(slot: string): string;