@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Gauge/Gauge.js

@@ -75,12 +75,20 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * The end angle (deg).
    * @default 360
    */
   endAngle: _propTypes.default.number,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -128,6 +136,10 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   startAngle: _propTypes.default.number,
   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]),
   text: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The value of the gauge.

package/Gauge/Gauge.mjs

@@ -68,12 +68,20 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * The end angle (deg).
    * @default 360
    */
   endAngle: PropTypes.number,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -121,6 +129,10 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   startAngle: PropTypes.number,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   text: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The value of the gauge.

package/Gauge/GaugeContainer.d.mts

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

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' | 'seriesConfig'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'seriesConfig'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Gauge/GaugeContainer.js

@@ -14,7 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("../ChartsSurface");
 var _GaugeProvider = require("./GaugeProvider");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
@@ -48,7 +48,7 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsProvider.ChartsProvider, {
     pluginParams: {
       width: inWidth,
       height: inHeight,
@@ -116,12 +116,20 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * The end angle (deg).
    * @default 360
    */
   endAngle: _propTypes.default.number,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -168,6 +176,10 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   startAngle: _propTypes.default.number,
   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]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The value of the gauge.

package/Gauge/GaugeContainer.mjs

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
 import { GaugeProvider } from "./GaugeProvider.mjs";
-import { ChartProvider } from "../context/ChartProvider/index.mjs";
+import { ChartsProvider } from "../context/ChartsProvider/index.mjs";
 import { defaultizeMargin } from "../internals/defaultizeMargin.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GStyled = styled('g', {
@@ -41,7 +41,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(ChartProvider, {
+  return /*#__PURE__*/_jsx(ChartsProvider, {
     pluginParams: {
       width: inWidth,
       height: inHeight,
@@ -109,12 +109,20 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * The end angle (deg).
    * @default 360
    */
   endAngle: PropTypes.number,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -161,6 +169,10 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   startAngle: PropTypes.number,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The value of the gauge.

package/Gauge/index.d.mts

@@ -3,5 +3,6 @@ export * from "./GaugeContainer.mjs";
 export * from "./GaugeValueText.mjs";
 export * from "./GaugeValueArc.mjs";
 export * from "./GaugeReferenceArc.mjs";
-export * from "./gaugeClasses.mjs";
+export { gaugeClasses } from "./gaugeClasses.mjs";
+export type { GaugeClasses, GaugeClassKey } from "./gaugeClasses.mjs";
 export { useGaugeState } from "./GaugeProvider.mjs";

package/Gauge/index.d.ts

@@ -3,5 +3,6 @@ export * from "./GaugeContainer.js";
 export * from "./GaugeValueText.js";
 export * from "./GaugeValueArc.js";
 export * from "./GaugeReferenceArc.js";
-export * from "./gaugeClasses.js";
+export { gaugeClasses } from "./gaugeClasses.js";
+export type { GaugeClasses, GaugeClassKey } from "./gaugeClasses.js";
 export { useGaugeState } from "./GaugeProvider.js";

package/Gauge/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  gaugeClasses: true,
   useGaugeState: true
 };
+Object.defineProperty(exports, "gaugeClasses", {
+  enumerable: true,
+  get: function () {
+    return _gaugeClasses.gaugeClasses;
+  }
+});
 Object.defineProperty(exports, "useGaugeState", {
   enumerable: true,
   get: function () {
@@ -73,15 +80,4 @@ Object.keys(_GaugeReferenceArc).forEach(function (key) {
   });
 });
 var _gaugeClasses = require("./gaugeClasses");
-Object.keys(_gaugeClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gaugeClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gaugeClasses[key];
-    }
-  });
-});
 var _GaugeProvider = require("./GaugeProvider");

package/Gauge/index.mjs

@@ -3,5 +3,5 @@ export * from "./GaugeContainer.mjs";
 export * from "./GaugeValueText.mjs";
 export * from "./GaugeValueArc.mjs";
 export * from "./GaugeReferenceArc.mjs";
-export * from "./gaugeClasses.mjs";
+export { gaugeClasses } from "./gaugeClasses.mjs";
 export { useGaugeState } from "./GaugeProvider.mjs";

package/LineChart/AreaElement.d.mts

@@ -2,36 +2,15 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedAreaProps } from "./AnimatedArea.mjs";
 import { type SeriesId } from "../models/seriesType/common.mjs";
-export interface AreaElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-export type AreaElementClassKey = keyof AreaElementClasses;
+import { type LineClasses } from "./lineClasses.mjs";
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
   isHighlighted: boolean;
-  classes?: Partial<AreaElementClasses>;
+  classes?: Partial<LineClasses>;
 }
-export declare function getAreaElementUtilityClass(slot: string): string;
-export declare const areaElementClasses: AreaElementClasses;
 export interface AreaElementSlots {
   /**
    * The component that renders the area.

package/LineChart/AreaElement.d.ts

@@ -2,36 +2,15 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedAreaProps } from "./AnimatedArea.js";
 import { type SeriesId } from "../models/seriesType/common.js";
-export interface AreaElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-export type AreaElementClassKey = keyof AreaElementClasses;
+import { type LineClasses } from "./lineClasses.js";
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
   isHighlighted: boolean;
-  classes?: Partial<AreaElementClasses>;
+  classes?: Partial<LineClasses>;
 }
-export declare function getAreaElementUtilityClass(slot: string): string;
-export declare const areaElementClasses: AreaElementClasses;
 export interface AreaElementSlots {
   /**
    * The component that renders the area.

package/LineChart/AreaElement.js

@@ -7,37 +7,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AreaElement = AreaElement;
-exports.areaElementClasses = void 0;
-exports.getAreaElementUtilityClass = getAreaElementUtilityClass;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _useItemHighlightState = require("../hooks/useItemHighlightState");
 var _AnimatedArea = require("./AnimatedArea");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
-function getAreaElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
-}
-const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return (0, _composeClasses.default)(slots, getAreaElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -64,10 +44,9 @@ function AreaElement(props) {
     seriesId
   }), [seriesId]);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)(identifier);
+  const highlightState = (0, _useItemHighlightState.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -76,7 +55,7 @@ function AreaElement(props) {
     isFaded,
     isHighlighted
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)();
   const Area = slots?.area ?? _AnimatedArea.AnimatedArea;
   const areaProps = (0, _useSlotProps.default)({
     elementType: Area,
@@ -85,9 +64,11 @@ function AreaElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId,
+      'data-series': seriesId
     }),
-    className: classes.root,
+    className: classes.area,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, other, areaProps));

package/LineChart/AreaElement.mjs

@@ -5,30 +5,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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';
 import useSlotProps from '@mui/utils/useSlotProps';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.mjs";
+import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
 import { AnimatedArea } from "./AnimatedArea.mjs";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getAreaElementUtilityClass(slot) {
-  return generateUtilityClass('MuiAreaElement', slot);
-}
-export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getAreaElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -55,10 +37,9 @@ function AreaElement(props) {
     seriesId
   }), [seriesId]);
   const interactionProps = useInteractionItemProps(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted(identifier);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -67,7 +48,7 @@ function AreaElement(props) {
     isFaded,
     isHighlighted
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses();
   const Area = slots?.area ?? AnimatedArea;
   const areaProps = useSlotProps({
     elementType: Area,
@@ -76,9 +57,11 @@ function AreaElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId,
+      'data-series': seriesId
     }),
-    className: classes.root,
+    className: classes.area,
     ownerState
   });
   return /*#__PURE__*/_jsx(Area, _extends({}, other, areaProps));

package/LineChart/AreaPlot.js

@@ -12,19 +12,21 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _AreaElement = require("./AreaElement");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useAreaPlotData = require("./useAreaPlotData");
 var _animation = require("../internals/animation/animation");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
+const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation", "className"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
 })({
-  [`& .${_AreaElement.areaElementClasses.root}`]: {
+  [`& .${_lineClasses.lineClasses.area}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -56,13 +58,17 @@ function AreaPlot(props) {
       slots,
       slotProps,
       onItemClick,
-      skipAnimation: inSkipAnimation
+      skipAnimation: inSkipAnimation,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({}, other, {
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.areaPlot, className)
+  }, other, {
     children: completedData.map(({
       d,
       seriesId,

package/LineChart/AreaPlot.mjs

@@ -2,22 +2,24 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
+const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { AreaElement, areaElementClasses } from "./AreaElement.mjs";
+import clsx from 'clsx';
+import { AreaElement } from "./AreaElement.mjs";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useAreaPlotData } from "./useAreaPlotData.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
+import { lineClasses, useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
 })({
-  [`& .${areaElementClasses.root}`]: {
+  [`& .${lineClasses.area}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
@@ -49,13 +51,17 @@ function AreaPlot(props) {
       slots,
       slotProps,
       onItemClick,
-      skipAnimation: inSkipAnimation
+      skipAnimation: inSkipAnimation,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
-  return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({}, other, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({
+    className: clsx(classes.areaPlot, className)
+  }, other, {
     children: completedData.map(({
       d,
       seriesId,

package/LineChart/CircleMarkElement.d.mts

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

package/LineChart/CircleMarkElement.d.ts

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

package/LineChart/CircleMarkElement.js

@@ -14,14 +14,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _markElementClasses = require("./markElementClasses");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "seriesId", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
 const Circle = (0, _styles.styled)('circle', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
-  [`&.${_markElementClasses.markElementClasses.animate}`]: {
+  [`&.${_lineClasses.lineClasses.markAnimate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'cx, cy, opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -64,14 +64,10 @@ function CircleMarkElement(props) {
     seriesId,
     dataIndex
   });
-  const ownerState = {
-    seriesId,
-    classes: innerClasses,
-    isHighlighted,
-    isFaded,
-    skipAnimation
-  };
-  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)({
+    skipAnimation,
+    classes: innerClasses
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, (0, _extends2.default)({}, other, {
     cx: x,
     cy: y,
@@ -79,13 +75,16 @@ function CircleMarkElement(props) {
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,
     strokeWidth: 2,
-    className: classes.root,
+    className: classes.mark,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     pointerEvents: hidden ? 'none' : undefined
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
+    "data-series-id": seriesId,
+    "data-series": seriesId,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1
   }));
 }