@mui/x-charts 8.11.2 → 8.12.0

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.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 { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -35,15 +35,15 @@ export default function ChartsYHighlight(props) {
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = getValueToPositionMapper(yScale);
-    const isBandScaleY = type === 'band' && value !== null && isBandScale(yScale);
+    const isYScaleOrdinal = type === 'band' && value !== null && isOrdinalScale(yScale);
     if (process.env.NODE_ENV !== 'production') {
-      const isError = isBandScaleY && yScale(value) === undefined;
+      const isError = isYScaleOrdinal && yScale(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: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
         d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
         className: classes.root,
         ownerState: {

package/esm/ChartsLegend/ChartsLegend.js

@@ -51,7 +51,8 @@ const RootElement = styled('ul', {
     display: ownerState.direction === 'vertical' ? 'flex' : 'inline-flex',
     alignItems: 'center',
     gap: theme.spacing(1)
-  }
+  },
+  gridArea: 'legend'
 }));
 const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
   defaultProps: {

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.d.ts

@@ -20,10 +20,10 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependK
    */
   labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
   /**
-   * Where to position the labels relative to the gradient.
+   * Where to position the labels relative to the color marks.
    * @default 'extremes'
    */
-  labelPosition?: 'start' | 'end' | 'extremes';
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
   /**
    * Callback fired when a legend item is clicked.
    * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.

package/esm/ChartsLegend/PiecewiseColorLegend.js

@@ -21,6 +21,7 @@ const RootElement = styled('ul', {
   theme,
   ownerState
 }) => {
+  const classes = piecewiseColorLegendClasses;
   return _extends({}, theme.typography.caption, {
     color: (theme.vars || theme).palette.text.primary,
     lineHeight: '100%',
@@ -32,8 +33,9 @@ const RootElement = styled('ul', {
     paddingInlineStart: 0,
     marginBlock: theme.spacing(1),
     marginInline: theme.spacing(1),
-    width: 'max-content',
-    [`button.${piecewiseColorLegendClasses.item}`]: {
+    width: 'fit-content',
+    gridArea: 'legend',
+    [`button.${classes.item}`]: {
       // Reset button styles
       background: 'none',
       border: 'none',
@@ -45,55 +47,62 @@ const RootElement = styled('ul', {
       letterSpacing: 'inherit',
       color: 'inherit'
     },
-    [`.${piecewiseColorLegendClasses.item}`]: {
+    [`.${classes.item}`]: {
       display: 'flex',
       gap: theme.spacing(0.5)
     },
-    [`li :not(.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}) .${piecewiseColorLegendClasses?.mark}`]: {
+    [`li :not(.${classes.minLabel}, .${classes.maxLabel}) .${classes?.mark}`]: {
       alignSelf: 'center'
     },
-    [`&.${piecewiseColorLegendClasses.start}`]: {
+    [`&.${classes.start}`]: {
       alignItems: 'end'
     },
-    [`&.${piecewiseColorLegendClasses.end}`]: {
+    [`&.${classes.end}`]: {
       alignItems: 'start'
     },
-    [`&.${piecewiseColorLegendClasses.horizontal}`]: {
+    [`&.${classes.horizontal}`]: {
       alignItems: 'center',
-      [`.${piecewiseColorLegendClasses.item}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'column'
       },
-      [`&.${piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.inlineStart}, &.${classes.inlineEnd}`]: {
+        gap: theme.spacing(1.5),
+        flexWrap: 'wrap',
+        [`.${classes.item}`]: {
+          flexDirection: 'row'
+        }
+      },
+      [`&.${classes.start}`]: {
         alignItems: 'end'
       },
-      [`&.${piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}`]: {
         alignItems: 'start'
       },
-      [`.${piecewiseColorLegendClasses.minLabel}`]: {
+      [`.${classes.minLabel}`]: {
         alignItems: 'end'
       },
-      [`&.${piecewiseColorLegendClasses.extremes}`]: {
-        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+      [`&.${classes.extremes}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'row'
         }
       }
     },
-    [`&.${piecewiseColorLegendClasses.vertical}`]: {
-      [`.${piecewiseColorLegendClasses.item}`]: {
+    [`&.${classes.vertical}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      [`&.${piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.start}, &.${classes.inlineStart}`]: {
         alignItems: 'end'
       },
-      [`&.${piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}, &.${classes.inlineEnd}`]: {
         alignItems: 'start'
       },
-      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+      [`&.${classes.extremes}`]: {
         alignItems: 'center',
-        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'column'
@@ -146,6 +155,8 @@ const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
   const isStart = labelPosition === 'start';
   const isEnd = labelPosition === 'end';
   const isExtremes = labelPosition === 'extremes';
+  const isInlineStart = labelPosition === 'inline-start';
+  const isInlineEnd = labelPosition === 'inline-end';
   return /*#__PURE__*/_jsx(RootElement, _extends({
     className: clsx(classes?.root, className),
     ref: ref
@@ -179,8 +190,8 @@ const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
       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,
@@ -248,7 +259,7 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Where to position the labels relative to the gradient.
    * @default 'extremes'
    */
-  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
+  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes', 'inline-start', 'inline-end']),
   /**
    * The type of the mark.
    * @default 'square'

package/esm/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/esm/ChartsLegend/piecewiseColorLegendClasses.js

@@ -11,7 +11,7 @@ export 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'],
@@ -20,4 +20,4 @@ export const useUtilityClasses = props => {
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);

package/esm/ChartsSurface/ChartsSurface.js

@@ -12,6 +12,7 @@ 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',
@@ -30,7 +31,22 @@ const ChartsSurfaceStyles = 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'
+  }
 }));
 
 /**
@@ -57,6 +73,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({
@@ -77,7 +95,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

@@ -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/esm/ChartsWrapper/ChartsWrapper.js

@@ -6,59 +6,103 @@ import { useChartRootRef } from "../hooks/useChartRootRef.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
+import { chartsToolbarClasses } from "../Toolbar/index.js";
 import { jsx as _jsx } from "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 'column';
+  return `"legend"
+          "chart"`;
 };
-const getAlign = (direction, position) => {
+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 horizontalPosition === 'start' ? `auto ${drawingAreaColumn}` : `${drawingAreaColumn} auto`;
+};
+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 = styled('div', {
   name: 'MuiChartsWrapper',
   slot: 'Root',
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'extendVertically'
+  shouldForwardProp: prop => 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(.${chartsToolbarClasses.root})`]: {
+      // Add a row for toolbar if there is one.
+      gridTemplateRows: `auto ${gridTemplateRows}`,
+      gridTemplateAreas: `"${gridTemplateColumns.split(' ').map(() => 'toolbar').join(' ')}"
+        ${gridTemplateAreas}`
     },
-    style: {
-      height: '100%'
-    }
-  }]
-}));
+    [`& .${chartsToolbarClasses.root}`]: {
+      gridArea: 'toolbar',
+      justifySelf: 'center'
+    },
+    justifyContent: 'center',
+    justifyItems: getJustifyItems(ownerState.legendPosition),
+    alignItems: getAlignItems(ownerState.legendPosition)
+  };
+});
 
 /**
  * Wrapper for the charts components.
@@ -73,6 +117,7 @@ function ChartsWrapper(props) {
   const chartRootRef = useChartRootRef();
   const store = useStore();
   const {
+    width: propsWidth,
     height: propsHeight
   } = useSelector(store, selectorChartPropsSize);
   return /*#__PURE__*/_jsx(Root, {
@@ -80,6 +125,7 @@ function ChartsWrapper(props) {
     ownerState: props,
     sx: sx,
     extendVertically: extendVertically ?? propsHeight === undefined,
+    width: propsWidth,
     children: children
   });
 }
@@ -94,6 +140,11 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
    * @default `false` if the `height` prop is set. And `true` otherwise.
    */
   extendVertically: PropTypes.bool,
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/esm/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 import { TICK_LABEL_GAP } from "./utilities.js";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.js";
@@ -33,7 +33,7 @@ function ChartsGroupedXAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = useAxisTicksProps(inProps);
-  if (!isBandScale(xScale)) {
+  if (!isOrdinalScale(xScale)) {
     throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
   }
   const {

package/esm/ChartsXAxis/ChartsXAxisImpl.js

@@ -10,7 +10,7 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import { ChartsSingleXAxisTicks } from "./ChartsSingleXAxisTicks.js";
 import { ChartsGroupedXAxisTicks } from "./ChartsGroupedXAxisTicks.js";
 import { ChartsText } from "../ChartsText/index.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { defaultProps, useUtilityClasses } from "./utilities.js";
 import { useDrawingArea } from "../hooks/index.js";
@@ -80,8 +80,8 @@ export function ChartsXAxisImpl(_ref) {
   }
   const labelHeight = label ? getStringSize(label, axisLabelProps.style).height : 0;
   const domain = xScale.domain();
-  const isScaleBand = isBandScale(xScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(isInfinity);
+  const isScaleOrdinal = isOrdinalScale(xScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/_jsx(ChartsGroupedXAxisTicks, _extends({}, inProps)) : /*#__PURE__*/_jsx(ChartsSingleXAxisTicks, _extends({}, inProps, {

package/esm/ChartsXAxis/getVisibleLabels.js

@@ -39,8 +39,12 @@ export 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/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/ChartsGroupedYAxisTicks.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 import { TICK_LABEL_GAP } from "./utilities.js";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.js";
@@ -34,7 +34,7 @@ function ChartsGroupedYAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = useAxisTicksProps(inProps);
-  if (!isBandScale(yScale)) {
+  if (!isOrdinalScale(yScale)) {
     throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
   }
   const {

package/esm/ChartsYAxis/ChartsYAxisImpl.js

@@ -14,7 +14,7 @@ import { defaultProps, useUtilityClasses } from "./utilities.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useIsHydrated } from "../hooks/useIsHydrated.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { getStringSize } from "../internals/domUtils.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -100,8 +100,8 @@ export function ChartsYAxisImpl(_ref) {
   };
   const axisLabelHeight = label == null ? 0 : getStringSize(label, axisLabelProps.style).height;
   const domain = yScale.domain();
-  const isScaleBand = isBandScale(yScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(isInfinity);
+  const isScaleOrdinal = isOrdinalScale(yScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/_jsx(ChartsGroupedYAxisTicks, _extends({}, inProps)) : /*#__PURE__*/_jsx(ChartsSingleYAxisTicks, _extends({}, inProps, {

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
+  });
+}