@mui/x-charts 8.11.2 → 8.12.0

package/ChartsLegend/PiecewiseColorLegend.js

@@ -28,6 +28,7 @@ const RootElement = (0, _styles.styled)('ul', {
   theme,
   ownerState
 }) => {
+  const classes = _piecewiseColorLegendClasses.piecewiseColorLegendClasses;
   return (0, _extends2.default)({}, theme.typography.caption, {
     color: (theme.vars || theme).palette.text.primary,
     lineHeight: '100%',
@@ -39,8 +40,9 @@ const RootElement = (0, _styles.styled)('ul', {
     paddingInlineStart: 0,
     marginBlock: theme.spacing(1),
     marginInline: theme.spacing(1),
-    width: 'max-content',
-    [`button.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+    width: 'fit-content',
+    gridArea: 'legend',
+    [`button.${classes.item}`]: {
       // Reset button styles
       background: 'none',
       border: 'none',
@@ -52,55 +54,62 @@ const RootElement = (0, _styles.styled)('ul', {
       letterSpacing: 'inherit',
       color: 'inherit'
     },
-    [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+    [`.${classes.item}`]: {
       display: 'flex',
       gap: theme.spacing(0.5)
     },
-    [`li :not(.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}) .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses?.mark}`]: {
+    [`li :not(.${classes.minLabel}, .${classes.maxLabel}) .${classes?.mark}`]: {
       alignSelf: 'center'
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+    [`&.${classes.start}`]: {
       alignItems: 'end'
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+    [`&.${classes.end}`]: {
       alignItems: 'start'
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.horizontal}`]: {
+    [`&.${classes.horizontal}`]: {
       alignItems: 'center',
-      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'column'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.inlineStart}, &.${classes.inlineEnd}`]: {
+        gap: theme.spacing(1.5),
+        flexWrap: 'wrap',
+        [`.${classes.item}`]: {
+          flexDirection: 'row'
+        }
+      },
+      [`&.${classes.start}`]: {
         alignItems: 'end'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}`]: {
         alignItems: 'start'
       },
-      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}`]: {
+      [`.${classes.minLabel}`]: {
         alignItems: 'end'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
-        [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
+      [`&.${classes.extremes}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'row'
         }
       }
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.vertical}`]: {
-      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+    [`&.${classes.vertical}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.start}, &.${classes.inlineStart}`]: {
         alignItems: 'end'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}, &.${classes.inlineEnd}`]: {
         alignItems: 'start'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
+      [`&.${classes.extremes}`]: {
         alignItems: 'center',
-        [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'column'
@@ -153,6 +162,8 @@ const PiecewiseColorLegend = exports.PiecewiseColorLegend = (0, _consumeThemePro
   const isStart = labelPosition === 'start';
   const isEnd = labelPosition === 'end';
   const isExtremes = labelPosition === 'extremes';
+  const isInlineStart = labelPosition === 'inline-start';
+  const isInlineEnd = labelPosition === 'inline-end';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootElement, (0, _extends2.default)({
     className: (0, _clsx.default)(classes?.root, className),
     ref: ref
@@ -186,8 +197,8 @@ const PiecewiseColorLegend = exports.PiecewiseColorLegend = (0, _consumeThemePro
       if (label === null || label === undefined) {
         return null;
       }
-      const isTextBefore = isStart || isExtremes && isFirst;
-      const isTextAfter = isEnd || isExtremes && isLast;
+      const isTextBefore = isStart || isExtremes && isFirst || isInlineStart;
+      const isTextAfter = isEnd || isExtremes && isLast || isInlineEnd;
       const clickObject = {
         type: 'piecewiseColor',
         color,
@@ -255,7 +266,7 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Where to position the labels relative to the gradient.
    * @default 'extremes'
    */
-  labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes']),
+  labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes', 'inline-start', 'inline-end']),
   /**
    * The type of the mark.
    * @default 'square'

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -19,6 +19,10 @@ export interface PiecewiseColorLegendClasses {
   end: string;
   /** Styles applied to the legend with the labels on the extremes of the color marks. */
   extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
   /** Styles applied to the marks. */
   mark: string;
   /** Styles applied to the series label. */

package/ChartsLegend/piecewiseColorLegendClasses.js

@@ -18,7 +18,7 @@ const useUtilityClasses = props => {
     labelPosition
   } = props;
   const slots = {
-    root: ['root', direction, labelPosition],
+    root: ['root', direction, labelPosition?.replaceAll(/-(\w)/g, match => match[1].toUpperCase())],
     minLabel: ['minLabel'],
     maxLabel: ['maxLabel'],
     item: ['item'],
@@ -28,4 +28,4 @@ const useUtilityClasses = props => {
   return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);
+const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);

package/ChartsSurface/ChartsSurface.js

@@ -18,6 +18,7 @@ var _useSvgRef = require("../hooks/useSvgRef");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
@@ -37,7 +38,22 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'pan-y',
-  userSelect: 'none'
+  userSelect: 'none',
+  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: 'auto',
+    '&[data-has-focused-item=true]': {
+      // But not if the chart has a focused children item
+      outline: 'none'
+    }
+  },
+  '& [data-focused=true]': {
+    outline: 'auto'
+  }
 }));
 
 /**
@@ -64,6 +80,8 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
     width: propsWidth,
     height: propsHeight
   } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
+  const isKeyboardNavigationEnabled = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
+  const hasFocusedItem = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsHasFocusedItem);
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const handleRef = (0, _useForkRef.default)(svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({
@@ -84,7 +102,9 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       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__*/(0, _jsxRuntime.jsx)("title", {

package/ChartsWrapper/ChartsWrapper.d.ts

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

package/ChartsWrapper/ChartsWrapper.js

@@ -14,59 +14,103 @@ var _useChartRootRef = require("../hooks/useChartRootRef");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
+var _Toolbar = require("../Toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
-const getDirection = (direction, position) => {
+const getJustifyItems = position => {
+  if (position?.horizontal === 'start') {
+    return 'start';
+  }
+  if (position?.horizontal === 'end') {
+    return 'end';
+  }
+  return 'center';
+};
+const getAlignItems = position => {
+  if (position?.vertical === 'top') {
+    return 'flex-start';
+  }
+  if (position?.vertical === 'bottom') {
+    return 'flex-end';
+  }
+  return 'center';
+};
+const getGridTemplateAreas = (hideLegend, direction, position) => {
+  if (hideLegend) {
+    return `"chart"`;
+  }
   if (direction === 'vertical') {
     if (position?.horizontal === 'start') {
-      return 'row';
+      return `"legend chart"`;
     }
-    return 'row-reverse';
+    return `"chart legend"`;
   }
   if (position?.vertical === 'bottom') {
-    return 'column-reverse';
+    return `"chart"
+            "legend"`;
+  }
+  return `"legend"
+          "chart"`;
+};
+const getTemplateColumns = (hideLegend = false, direction = 'horizontal', horizontalPosition = 'end', width = undefined) => {
+  const drawingAreaColumn = width ? 'auto' : '1fr';
+  if (direction === 'horizontal') {
+    return drawingAreaColumn;
   }
-  return 'column';
+  if (hideLegend) {
+    return drawingAreaColumn;
+  }
+  return horizontalPosition === 'start' ? `auto ${drawingAreaColumn}` : `${drawingAreaColumn} auto`;
 };
-const getAlign = (direction, position) => {
+const getTemplateRows = (hideLegend = false, direction = 'horizontal', verticalPosition = 'top') => {
+  const drawingAreaRow = '1fr';
   if (direction === 'vertical') {
-    if (position?.vertical === 'top') {
-      return 'flex-start';
-    }
-    if (position?.vertical === 'bottom') {
-      return 'flex-end';
-    }
+    return drawingAreaRow;
   }
-  if (direction === 'horizontal') {
-    if (position?.horizontal === 'start') {
-      return 'flex-start';
-    }
-    if (position?.horizontal === 'end') {
-      return 'flex-end';
-    }
+  if (hideLegend) {
+    return drawingAreaRow;
   }
-  return 'center';
+  return verticalPosition === 'bottom' ? `${drawingAreaRow} auto` : `auto ${drawingAreaRow}`;
 };
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsWrapper',
   slot: 'Root',
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'extendVertically'
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'extendVertically' && prop !== 'width'
 })(({
-  ownerState
-}) => ({
-  display: 'flex',
-  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition),
-  variants: [{
-    props: {
-      extendVertically: true
+  ownerState,
+  width
+}) => {
+  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(.${_Toolbar.chartsToolbarClasses.root})`]: {
+      // Add a row for toolbar if there is one.
+      gridTemplateRows: `auto ${gridTemplateRows}`,
+      gridTemplateAreas: `"${gridTemplateColumns.split(' ').map(() => 'toolbar').join(' ')}"
+        ${gridTemplateAreas}`
     },
-    style: {
-      height: '100%'
-    }
-  }]
-}));
+    [`& .${_Toolbar.chartsToolbarClasses.root}`]: {
+      gridArea: 'toolbar',
+      justifySelf: 'center'
+    },
+    justifyContent: 'center',
+    justifyItems: getJustifyItems(ownerState.legendPosition),
+    alignItems: getAlignItems(ownerState.legendPosition)
+  };
+});
 
 /**
  * Wrapper for the charts components.
@@ -81,6 +125,7 @@ function ChartsWrapper(props) {
   const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
   const store = (0, _useStore.useStore)();
   const {
+    width: propsWidth,
     height: propsHeight
   } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
@@ -88,6 +133,7 @@ function ChartsWrapper(props) {
     ownerState: props,
     sx: sx,
     extendVertically: extendVertically ?? propsHeight === undefined,
+    width: propsWidth,
     children: children
   });
 }
@@ -102,6 +148,11 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
    * @default `false` if the `height` prop is set. And `true` otherwise.
    */
   extendVertically: _propTypes.default.bool,
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend: _propTypes.default.bool,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsGroupedXAxisTicks = ChartsGroupedXAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
@@ -40,7 +40,7 @@ function ChartsGroupedXAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
-  if (!(0, _isBandScale.isBandScale)(xScale)) {
+  if (!(0, _scaleGuards.isOrdinalScale)(xScale)) {
     throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
   }
   const {

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _ChartsSingleXAxisTicks = require("./ChartsSingleXAxisTicks");
 var _ChartsGroupedXAxisTicks = require("./ChartsGroupedXAxisTicks");
 var _ChartsText = require("../ChartsText");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _isInfinity = require("../internals/isInfinity");
 var _utilities = require("./utilities");
 var _hooks = require("../hooks");
@@ -87,8 +87,8 @@ function ChartsXAxisImpl(_ref) {
   }
   const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
   const domain = xScale.domain();
-  const isScaleBand = (0, _isBandScale.isBandScale)(xScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity);
+  const isScaleOrdinal = (0, _scaleGuards.isOrdinalScale)(xScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(_isInfinity.isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxisTicks.ChartsGroupedXAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxisTicks.ChartsSingleXAxisTicks, (0, _extends2.default)({}, inProps, {

package/ChartsXAxis/getVisibleLabels.js

@@ -43,8 +43,12 @@ function getVisibleLabels(xTicks, {
   return new Set(xTicks.filter((item, labelIndex) => {
     const {
       offset,
-      labelOffset
+      labelOffset,
+      formattedValue
     } = item;
+    if (formattedValue === '') {
+      return false;
+    }
     const textPosition = offset + labelOffset;
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;

package/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/ChartsYAxis/ChartsGroupedYAxisTicks.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsGroupedYAxisTicks = ChartsGroupedYAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
@@ -41,7 +41,7 @@ function ChartsGroupedYAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
-  if (!(0, _isBandScale.isBandScale)(yScale)) {
+  if (!(0, _scaleGuards.isOrdinalScale)(yScale)) {
     throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
   }
   const {

package/ChartsYAxis/ChartsYAxisImpl.js

@@ -19,7 +19,7 @@ var _utilities = require("./utilities");
 var _isInfinity = require("../internals/isInfinity");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useIsHydrated = require("../hooks/useIsHydrated");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _domUtils = require("../internals/domUtils");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -107,8 +107,8 @@ function ChartsYAxisImpl(_ref) {
   };
   const axisLabelHeight = label == null ? 0 : (0, _domUtils.getStringSize)(label, axisLabelProps.style).height;
   const domain = yScale.domain();
-  const isScaleBand = (0, _isBandScale.isBandScale)(yScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity);
+  const isScaleOrdinal = (0, _scaleGuards.isOrdinalScale)(yScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(_isInfinity.isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedYAxisTicks.ChartsGroupedYAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleYAxisTicks.ChartsSingleYAxisTicks, (0, _extends2.default)({}, inProps, {

package/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/LineChart/FocusedMark.d.ts

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

package/LineChart/FocusedMark.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedMark = FocusedMark;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const RADIUS = 6;
+function FocusedMark() {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const lineSeries = (0, _hooks.useLineSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.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__*/(0, _jsxRuntime.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/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/LineChart/LineChart.js

@@ -27,6 +27,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
+var _FocusedMark = require("./FocusedMark");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -70,7 +71,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMark.FocusedMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -118,6 +119,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Options to enable features planned for the next major.
    */

package/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>;