@mui/x-charts 8.27.0 → 9.0.0-alpha.0

package/esm/ChartsYAxis/useAxisTicksProps.js

@@ -23,7 +23,7 @@ export function useAxisTicksProps(inProps) {
     } = _yAxis,
     settings = _objectWithoutPropertiesLoose(_yAxis, _excluded);
 
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = useThemeProps({
     props: _extends({}, settings, inProps),
     name: 'MuiChartsYAxis'

package/esm/ChartsYAxis/utilities.js

@@ -3,11 +3,10 @@ import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 export const useUtilityClasses = ownerState => {
   const {
     classes,
-    position,
-    id
+    position
   } = ownerState;
   const slots = {
-    root: ['root', 'directionY', position, `id-${id}`],
+    root: ['root', 'directionY', position],
     line: ['line'],
     tickContainer: ['tickContainer'],
     tick: ['tick'],

package/esm/Gauge/GaugeContainer.d.ts

@@ -3,7 +3,7 @@ import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { type GaugeProviderProps } from "./GaugeProvider.js";
 import { type MergeSignaturesProperty } from "../internals/plugins/models/index.js";
 import { type ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures' | 'seriesConfig'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/esm/Gauge/GaugeContainer.js

@@ -51,7 +51,9 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
         top: 10,
         bottom: 10
       })
-    },
+    }
+    // We just use some of the core plugins for dimension management.
+    ,
     plugins: [],
     children: /*#__PURE__*/_jsx(GaugeProvider, {
       value: value,

package/esm/LineChart/AnimatedArea.js

@@ -27,7 +27,7 @@ function AnimatedArea(props) {
   const animatedProps = useAnimateArea(props);
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
-    id: `${ownerState.id}-area-clip`,
+    seriesId: `${ownerState.seriesId}-area-clip`,
     children: /*#__PURE__*/_jsx("path", _extends({
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:
@@ -35,7 +35,7 @@ function AnimatedArea(props) {
       ownerState.isHighlighted ? 'brightness(140%)' : ownerState.gradientId ? undefined : 'brightness(120%)',
       opacity: ownerState.isFaded ? 0.3 : 1,
       stroke: "none",
-      "data-series": ownerState.id,
+      "data-series": ownerState.seriesId,
       "data-highlighted": ownerState.isHighlighted || undefined,
       "data-faded": ownerState.isFaded || undefined
     }, other, animatedProps))
@@ -51,7 +51,7 @@ process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
     classes: PropTypes.object,
     color: PropTypes.string.isRequired,
     gradientId: PropTypes.string,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     isFaded: PropTypes.bool.isRequired,
     isHighlighted: PropTypes.bool.isRequired
   }).isRequired,

package/esm/LineChart/AnimatedLine.js

@@ -32,7 +32,7 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
   const fadedOpacity = ownerState.isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
-    id: `${ownerState.id}-line-clip`,
+    seriesId: `${ownerState.seriesId}-line-clip`,
     children: /*#__PURE__*/_jsx("path", _extends({
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,
@@ -40,7 +40,7 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
       opacity: ownerState.hidden ? 0 : fadedOpacity,
-      "data-series": ownerState.id,
+      "data-series": ownerState.seriesId,
       "data-highlighted": ownerState.isHighlighted || undefined,
       "data-faded": ownerState.isFaded || undefined
     }, other, animateProps))
@@ -58,9 +58,9 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
     color: PropTypes.string.isRequired,
     gradientId: PropTypes.string,
     hidden: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired
+    isHighlighted: PropTypes.bool.isRequired,
+    seriesId: PropTypes.string.isRequired
   }).isRequired,
   /**
    * If `true`, animations are skipped.

package/esm/LineChart/AppearingMask.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
 interface AppearingMaskProps {
-  id: SeriesId;
+  seriesId: SeriesId;
   skipAnimation?: boolean;
   children: React.ReactNode;
 }

package/esm/LineChart/AppearingMask.js

@@ -31,7 +31,7 @@ const AnimatedRect = styled('rect', {
 export function AppearingMask(props) {
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
-  const clipId = cleanId(`${chartId}-${props.id}`);
+  const clipId = cleanId(`${chartId}-${props.seriesId}`);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,

package/esm/LineChart/AreaElement.d.ts

@@ -17,7 +17,7 @@ export interface AreaElementClasses {
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
@@ -36,7 +36,7 @@ export interface AreaElementSlots {
 export interface AreaElementSlotProps {
   area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
 }
-export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color'> {
   d: string;
   /**
    * The props used for each component slot.

package/esm/LineChart/AreaElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
+const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -20,12 +20,12 @@ export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['roo
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isFaded,
     isHighlighted
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getAreaElementUtilityClass, classes);
 };
@@ -41,7 +41,7 @@ const useUtilityClasses = ownerState => {
  */
 function AreaElement(props) {
   const {
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       gradientId,
@@ -52,16 +52,16 @@ function AreaElement(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
     type: 'line',
-    seriesId: id
+    seriesId
   });
   const {
     isFaded,
     isHighlighted
   } = useItemHighlighted({
-    seriesId: id
+    seriesId
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     color,
     gradientId,
@@ -91,7 +91,7 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   color: PropTypes.string.isRequired,
   d: PropTypes.string.isRequired,
   gradientId: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/esm/LineChart/AreaPlot.js

@@ -63,7 +63,7 @@ function AreaPlot(props) {
       area,
       gradientId
     }) => !!area && /*#__PURE__*/_jsx(AreaElement, {
-      id: seriesId,
+      seriesId: seriesId,
       d: d,
       color: color,
       gradientId: gradientId,

package/esm/LineChart/CircleMarkElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type MarkElementOwnerState } from "./markElementClasses.js";
-export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.
    * @default false

package/esm/LineChart/CircleMarkElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
+const _excluded = ["x", "y", "seriesId", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
@@ -37,7 +37,7 @@ function CircleMarkElement(props) {
   const {
       x,
       y,
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       dataIndex,
@@ -54,11 +54,11 @@ function CircleMarkElement(props) {
   const theme = useTheme();
   const interactionProps = useInteractionItemProps({
     type: 'line',
-    seriesId: id,
+    seriesId,
     dataIndex
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     isHighlighted,
     isFaded,
@@ -92,7 +92,7 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
    * The index to the element in the series' data array.
    */
   dataIndex: PropTypes.number.isRequired,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   /**
    * The shape of the marker.
    */

package/esm/LineChart/LineChart.js

@@ -81,6 +81,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -160,7 +165,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['line']).isRequired
   })),
   /**
@@ -181,7 +186,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -211,7 +216,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['line']).isRequired
   })),
   /**
@@ -313,7 +318,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['line']).isRequired
   }),
   /**

package/esm/LineChart/LineElement.d.ts

@@ -17,7 +17,7 @@ export interface LineElementClasses {
 }
 export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
@@ -38,7 +38,7 @@ export interface LineElementSlots {
 export interface LineElementSlotProps {
   line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
 }
-export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color'> {
   d: string;
   /** If `true`, the line is hidden. */
   hidden?: boolean;

package/esm/LineChart/LineElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
+const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -20,12 +20,12 @@ export const lineElementClasses = generateUtilityClasses('MuiLineElement', ['roo
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isFaded,
     isHighlighted
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getLineElementUtilityClass, classes);
 };
@@ -41,7 +41,7 @@ const useUtilityClasses = ownerState => {
  */
 function LineElement(props) {
   const {
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       gradientId,
@@ -53,16 +53,16 @@ function LineElement(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
     type: 'line',
-    seriesId: id
+    seriesId
   });
   const {
     isFaded,
     isHighlighted
   } = useItemHighlighted({
-    seriesId: id
+    seriesId
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     color,
     gradientId,
@@ -95,7 +95,7 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   gradientId: PropTypes.string,
   /** If `true`, the line is hidden. */
   hidden: PropTypes.bool,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/esm/LineChart/LineHighlightElement.d.ts

@@ -6,7 +6,7 @@ export interface LineHighlightElementClasses {
 }
 export type HighlightElementClassKey = keyof LineHighlightElementClasses;
 interface LineHighlightElementCommonProps {
-  id: SeriesId;
+  seriesId: SeriesId;
   color: string;
   x: number;
   y: number;
@@ -16,9 +16,9 @@ export declare function getHighlightElementUtilityClass(slot: string): string;
 export declare const lineHighlightElementClasses: LineHighlightElementClasses;
 export type LineHighlightElementProps = (LineHighlightElementCommonProps & ({
   shape: 'circle';
-} & Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>)) | (LineHighlightElementCommonProps & {
+} & Omit<React.SVGProps<SVGCircleElement>, 'ref'>)) | (LineHighlightElementCommonProps & {
   shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
-} & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'>);
+} & Omit<React.SVGProps<SVGPathElement>, 'ref'>);
 /**
  * Demos:
  *

package/esm/LineChart/LineHighlightElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape"];
+const _excluded = ["x", "y", "seriesId", "classes", "color", "shape"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import reactMajor from '@mui/x-internals/reactMajor';
@@ -19,10 +19,10 @@ export const lineHighlightElementClasses = generateUtilityClasses('MuiHighlightE
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id
+    seriesId
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`]
+    root: ['root', `series-${seriesId}`]
   };
   return composeClasses(slots, getHighlightElementUtilityClass, classes);
 };
@@ -73,7 +73,7 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
 } : void 0;
 export { LineHighlightElement };

package/esm/LineChart/LineHighlightPlot.js

@@ -94,7 +94,7 @@ function LineHighlightPlot(props) {
         }
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/_jsx(Element, _extends({
-          id: seriesId,
+          seriesId: seriesId,
           color: colorGetter(highlightedIndex),
           x: x,
           y: y,

package/esm/LineChart/LinePlot.js

@@ -63,7 +63,7 @@ function LinePlot(props) {
       hidden
     }) => {
       return /*#__PURE__*/_jsx(LineElement, {
-        id: seriesId,
+        seriesId: seriesId,
         d: d,
         color: color,
         gradientId: gradientId,

package/esm/LineChart/MarkElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type MarkElementOwnerState } from "./markElementClasses.js";
-export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.
    * @default false

package/esm/LineChart/MarkElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
+const _excluded = ["x", "y", "seriesId", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -39,7 +39,7 @@ function MarkElement(props) {
   const {
       x,
       y,
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       shape,
@@ -54,11 +54,11 @@ function MarkElement(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
     type: 'line',
-    seriesId: id,
+    seriesId,
     dataIndex
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     isHighlighted,
     isFaded,
@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  seriesId: PropTypes.string.isRequired,
   /**
    * If `true`, the marker is faded.
    * @default false

package/esm/LineChart/MarkPlot.js

@@ -89,7 +89,7 @@ function MarkPlot(props) {
           color
         }) => {
           return /*#__PURE__*/_jsx(Mark, _extends({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: index,
             shape: shape,
             color: color,

package/esm/LineChart/markElementClasses.d.ts

@@ -16,7 +16,7 @@ export interface MarkElementClasses {
 }
 export type MarkElementClassKey = keyof MarkElementClasses;
 export interface MarkElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   isFaded: boolean;
   isHighlighted: boolean;
   classes?: Partial<MarkElementClasses>;

package/esm/LineChart/markElementClasses.js

@@ -8,13 +8,13 @@ export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['roo
 export const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isFaded,
     isHighlighted,
     skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', skipAnimation ? undefined : 'animate']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded', skipAnimation ? undefined : 'animate']
   };
   return composeClasses(slots, getMarkElementUtilityClass, classes);
 };

package/esm/LineChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'line'>;
 export declare const getExtremumY: CartesianExtremumGetter<'line'>;

package/esm/LineChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'line'>;
 export default getColor;

package/esm/LineChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'line'>;
 export default getSeriesWithDefaultValues;

package/esm/LineChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const lineSeriesConfig: ChartSeriesTypeConfig<'line'>;

package/esm/LineChart/seriesConfig/index.js

@@ -7,6 +7,7 @@ import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
+import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.js";
 export const lineSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -18,5 +19,6 @@ export const lineSeriesConfig = {
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex
 };

package/esm/LineChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
+import { type ComposableCartesianChartSeriesType } from "../../internals/commonNextFocusItem.js";
 import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'line', 'bar' | 'line' | 'scatter'>;
+declare const keyboardFocusHandler: KeyboardFocusHandler<'line', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/esm/LineChart/seriesConfig/keyboardFocusHandler.js

@@ -1,15 +1,14 @@
-import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem, composableCartesianSeriesTypes } from "../../internals/commonNextFocusItem.js";
 const keyboardFocusHandler = event => {
   switch (event.key) {
     case 'ArrowRight':
-      return createGetNextIndexFocusedItem(outSeriesTypes);
+      return createGetNextIndexFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowLeft':
-      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+      return createGetPreviousIndexFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowDown':
-      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+      return createGetPreviousSeriesFocusedItem(composableCartesianSeriesTypes);
     case 'ArrowUp':
-      return createGetNextSeriesFocusedItem(outSeriesTypes);
+      return createGetNextSeriesFocusedItem(composableCartesianSeriesTypes);
     default:
       return null;
   }

package/esm/LineChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'line'>;
 export default legendGetter;

package/esm/LineChart/seriesConfig/legend.js

@@ -12,7 +12,6 @@ const legendGetter = params => {
     acc.push({
       type: 'line',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel