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

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

@@ -63,11 +63,12 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
   const {
     chartDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
@@ -88,6 +89,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,8 +173,8 @@ 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]),
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -188,7 +194,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,8 +224,8 @@ 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]),
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -280,6 +286,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.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.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -314,14 +328,22 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

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

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useStore = require("../internals/store/useStore");
 var _LineHighlightElement = require("./LineHighlightElement");
-var _useScale = require("../hooks/useScale");
+var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _constants = require("../constants");
 var _useLineSeries = require("../hooks/useLineSeries");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
@@ -87,7 +87,7 @@ function LineHighlightPlot(props) {
         if (highlightedAxisId !== xAxisId) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const xScale = (0, _getValueToPositionMapper.getValueToPositionMapper)(xAxis[xAxisId].scale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
@@ -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;