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

package/ChartsYAxis/useAxisTicksProps.js

@@ -29,7 +29,7 @@ function useAxisTicksProps(inProps) {
     } = _yAxis,
     settings = (0, _objectWithoutPropertiesLoose2.default)(_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 = (0, _styles.useThemeProps)({
     props: (0, _extends2.default)({}, settings, inProps),
     name: 'MuiChartsYAxis'

package/ChartsYAxis/utilities.js

@@ -10,11 +10,10 @@ var _axisClasses = require("../ChartsAxis/axisClasses");
 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/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/Gauge/GaugeContainer.js

@@ -58,7 +58,9 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
         top: 10,
         bottom: 10
       })
-    },
+    }
+    // We just use some of the core plugins for dimension management.
+    ,
     plugins: [],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
       value: value,

package/LineChart/AnimatedArea.js

@@ -34,7 +34,7 @@ function AnimatedArea(props) {
   const animatedProps = (0, _useAnimateArea.useAnimateArea)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
-    id: `${ownerState.id}-area-clip`,
+    seriesId: `${ownerState.seriesId}-area-clip`,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:
@@ -42,7 +42,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))
@@ -58,7 +58,7 @@ process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
     classes: _propTypes.default.object,
     color: _propTypes.default.string.isRequired,
     gradientId: _propTypes.default.string,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.string.isRequired,
     isFaded: _propTypes.default.bool.isRequired,
     isHighlighted: _propTypes.default.bool.isRequired
   }).isRequired,

package/LineChart/AnimatedLine.js

@@ -39,7 +39,7 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
   const fadedOpacity = ownerState.isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
-    id: `${ownerState.id}-line-clip`,
+    seriesId: `${ownerState.seriesId}-line-clip`,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,
@@ -47,7 +47,7 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
       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))
@@ -65,9 +65,9 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
     color: _propTypes.default.string.isRequired,
     gradientId: _propTypes.default.string,
     hidden: _propTypes.default.bool,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     isFaded: _propTypes.default.bool.isRequired,
-    isHighlighted: _propTypes.default.bool.isRequired
+    isHighlighted: _propTypes.default.bool.isRequired,
+    seriesId: _propTypes.default.string.isRequired
   }).isRequired,
   /**
    * If `true`, animations are skipped.

package/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/LineChart/AppearingMask.js

@@ -39,7 +39,7 @@ const AnimatedRect = (0, _styles.styled)('rect', {
 function AppearingMask(props) {
   const drawingArea = (0, _hooks.useDrawingArea)();
   const chartId = (0, _hooks.useChartId)();
-  const clipId = (0, _cleanId.cleanId)(`${chartId}-${props.id}`);
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${props.seriesId}`);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,

package/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/LineChart/AreaElement.js

@@ -21,7 +21,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _AnimatedArea = require("./AnimatedArea");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
+const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 function getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }
@@ -29,12 +29,12 @@ const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClas
 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 (0, _composeClasses.default)(slots, getAreaElementUtilityClass, classes);
 };
@@ -50,7 +50,7 @@ const useUtilityClasses = ownerState => {
  */
 function AreaElement(props) {
   const {
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       gradientId,
@@ -61,16 +61,16 @@ function AreaElement(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
-    seriesId: id
+    seriesId
   });
   const {
     isFaded,
     isHighlighted
   } = (0, _useItemHighlighted.useItemHighlighted)({
-    seriesId: id
+    seriesId
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     color,
     gradientId,
@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
   gradientId: _propTypes.default.string,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/LineChart/AreaPlot.js

@@ -70,7 +70,7 @@ function AreaPlot(props) {
       area,
       gradientId
     }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
-      id: seriesId,
+      seriesId: seriesId,
       d: d,
       color: color,
       gradientId: gradientId,

package/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/LineChart/CircleMarkElement.js

@@ -16,7 +16,7 @@ var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const Circle = (0, _styles.styled)('circle', {
   slot: 'internal',
   shouldForwardProp: undefined
@@ -44,7 +44,7 @@ function CircleMarkElement(props) {
   const {
       x,
       y,
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       dataIndex,
@@ -61,11 +61,11 @@ function CircleMarkElement(props) {
   const theme = (0, _styles.useTheme)();
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
-    seriesId: id,
+    seriesId,
     dataIndex
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     isHighlighted,
     isFaded,
@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
    * The index to the element in the series' data array.
    */
   dataIndex: _propTypes.default.number.isRequired,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * The shape of the marker.
    */

package/LineChart/LineChart.js

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

package/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/LineChart/LineElement.js

@@ -21,7 +21,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
+const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
 function getLineElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLineElement', slot);
 }
@@ -29,12 +29,12 @@ const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClas
 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 (0, _composeClasses.default)(slots, getLineElementUtilityClass, classes);
 };
@@ -50,7 +50,7 @@ const useUtilityClasses = ownerState => {
  */
 function LineElement(props) {
   const {
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       gradientId,
@@ -62,16 +62,16 @@ function LineElement(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
-    seriesId: id
+    seriesId
   });
   const {
     isFaded,
     isHighlighted
   } = (0, _useItemHighlighted.useItemHighlighted)({
-    seriesId: id
+    seriesId
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     color,
     gradientId,
@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   gradientId: _propTypes.default.string,
   /** If `true`, the line is hidden. */
   hidden: _propTypes.default.bool,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/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/LineChart/LineHighlightElement.js

@@ -20,7 +20,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _getSymbol = require("../internals/getSymbol");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "shape"];
+const _excluded = ["x", "y", "seriesId", "classes", "color", "shape"];
 function getHighlightElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
 }
@@ -28,10 +28,10 @@ const lineHighlightElementClasses = exports.lineHighlightElementClasses = (0, _g
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id
+    seriesId
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`]
+    root: ['root', `series-${seriesId}`]
   };
   return (0, _composeClasses.default)(slots, getHighlightElementUtilityClass, classes);
 };
@@ -82,6 +82,6 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
 } : void 0;

package/LineChart/LineHighlightPlot.js

@@ -101,7 +101,7 @@ function LineHighlightPlot(props) {
         }
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
-          id: seriesId,
+          seriesId: seriesId,
           color: colorGetter(highlightedIndex),
           x: x,
           y: y,

package/LineChart/LinePlot.js

@@ -70,7 +70,7 @@ function LinePlot(props) {
       hidden
     }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
-        id: seriesId,
+        seriesId: seriesId,
         d: d,
         color: color,
         gradientId: gradientId,

package/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/LineChart/MarkElement.js

@@ -18,7 +18,7 @@ var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const MarkElementPath = (0, _styles.styled)('path', {
   name: 'MuiMarkElement',
   slot: 'Root'
@@ -46,7 +46,7 @@ function MarkElement(props) {
   const {
       x,
       y,
-      id,
+      seriesId,
       classes: innerClasses,
       color,
       shape,
@@ -61,11 +61,11 @@ function MarkElement(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
-    seriesId: id,
+    seriesId,
     dataIndex
   });
   const ownerState = {
-    id,
+    seriesId,
     classes: innerClasses,
     isHighlighted,
     isFaded,
@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    * @default false
    */
   hidden: _propTypes.default.bool,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   /**
    * If `true`, the marker is faded.
    * @default false

package/LineChart/MarkPlot.js

@@ -96,7 +96,7 @@ function MarkPlot(props) {
           color
         }) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: index,
             shape: shape,
             color: color,

package/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/LineChart/markElementClasses.js

@@ -16,13 +16,13 @@ const markElementClasses = exports.markElementClasses = (0, _generateUtilityClas
 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 (0, _composeClasses.default)(slots, getMarkElementUtilityClass, classes);
 };

package/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/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/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/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/LineChart/seriesConfig/index.js

@@ -15,6 +15,7 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const lineSeriesConfig = exports.lineSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -26,5 +27,6 @@ const lineSeriesConfig = exports.lineSeriesConfig = {
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/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/LineChart/seriesConfig/keyboardFocusHandler.js

@@ -5,17 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
 const keyboardFocusHandler = event => {
   switch (event.key) {
     case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
     default:
       return null;
   }

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