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

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

@@ -86,5 +86,5 @@ export interface LineChartProps extends Omit<ChartContainerProps<'line', LineCha
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
 export { LineChart };

package/esm/LineChart/LineChart.js

@@ -56,11 +56,12 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   const {
     chartDataProviderProps,
     chartsSurfaceProps
-  } = useChartContainerProps(chartContainerProps, ref);
+  } = useChartContainerProps(chartContainerProps);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
@@ -81,6 +82,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,8 +166,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -181,7 +187,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,8 +217,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -273,6 +279,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -307,14 +321,22 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

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;
@@ -14,11 +14,11 @@ interface LineHighlightElementCommonProps {
 }
 export declare function getHighlightElementUtilityClass(slot: string): string;
 export declare const lineHighlightElementClasses: LineHighlightElementClasses;
-export type LineHighlightElementProps = (LineHighlightElementCommonProps & ({
+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

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useStore } from "../internals/store/useStore.js";
 import { LineHighlightElement } from "./LineHighlightElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import getColor from "./seriesConfig/getColor.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;