@mui/x-charts 8.27.4 → 8.28.0

package/esm/LineChart/LinePlot.js

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

package/esm/LineChart/MarkElement.js

@@ -10,7 +10,8 @@ import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
+import { markElementClasses, useUtilityClasses as useDeprecatedUtilityClasses } from "./markElementClasses.js";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
@@ -64,14 +65,18 @@ function MarkElement(props) {
     isFaded,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses({
+    skipAnimation,
+    classes: innerClasses
+  });
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
     style: _extends({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
     }),
     ownerState: ownerState,
-    className: classes.root,
+    className: `${classes.mark} ${deprecatedClasses.root}`,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
@@ -79,6 +84,9 @@ function MarkElement(props) {
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
+    "data-series-id": id,
+    "data-series": id,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1,
     strokeWidth: 2,
     stroke: color

package/esm/LineChart/MarkPlot.js

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { CircleMarkElement } from "./CircleMarkElement.js";
 import { MarkElement } from "./MarkElement.js";
@@ -13,7 +15,13 @@ import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugin
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useMarkPlotData } from "./useMarkPlotData.js";
+import { useUtilityClasses } from "./lineClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const MarkPlotRoot = styled('g', {
+  name: 'MuiMarkPlot',
+  slot: 'Root'
+})({});
+
 /**
  * Demos:
  *
@@ -29,7 +37,8 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
@@ -63,7 +72,10 @@ function MarkPlot(props) {
     return rep;
   }, [xAxisHighlightIndexes]);
   const completedData = useMarkPlotData(xAxis, yAxis);
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(MarkPlotRoot, _extends({
+    className: clsx(classes.markPlot, className)
+  }, other, {
     children: completedData.map(({
       seriesId,
       clipId,

package/esm/LineChart/index.d.ts

@@ -12,4 +12,6 @@ export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
 export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";
+export { lineClasses } from "./lineClasses.js";
+export type { LineClassKey, LineClasses } from "./lineClasses.js";

package/esm/LineChart/index.js

@@ -11,4 +11,5 @@ export * from "./MarkElement.js";
 export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";
+export { lineClasses } from "./lineClasses.js";

package/esm/LineChart/lineClasses.d.ts

@@ -0,0 +1,34 @@
+import { type SeriesId } from "../models/seriesType/common.js";
+export interface LineClasses {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+}
+export type LineClassKey = keyof LineClasses;
+export interface MarkElementOwnerState {
+  id: SeriesId;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+}
+export declare function getLineUtilityClass(slot: string): string;
+export declare const lineClasses: LineClasses;
+export interface UseUtilityClassesOptions {
+  skipAnimation?: boolean;
+  classes?: Partial<LineClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;

package/esm/LineChart/lineClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getLineUtilityClass(slot) {
+  return generateUtilityClass('MuiLineChart', slot);
+}
+export const lineClasses = generateUtilityClasses('MuiLineChart', ['area', 'line', 'mark', 'markAnimate', 'highlight', 'areaPlot', 'linePlot', 'markPlot']);
+export const useUtilityClasses = options => {
+  const {
+    skipAnimation,
+    classes
+  } = options ?? {};
+  const slots = {
+    area: ['area'],
+    line: ['line'],
+    mark: ['mark', !skipAnimation && 'markAnimate'],
+    highlight: ['highlight'],
+    areaPlot: ['areaPlot'],
+    linePlot: ['linePlot'],
+    markPlot: ['markPlot']
+  };
+  return composeClasses(slots, getLineUtilityClass, classes);
+};

package/esm/LineChart/markElementClasses.d.ts

@@ -1,27 +1,43 @@
-import { type SeriesId } from "../models/seriesType/common.js";
+import type { MarkElementOwnerState } from "./lineClasses.js";
+export { type MarkElementOwnerState };
+/**
+ * @deprecated Use `LineClasses` instead.
+ */
 export interface MarkElementClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `lineClasses.mark` instead.
+   */
   root: string;
   /** Styles applied to the root element when highlighted. */
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
-  /** Styles applied to the root element when animation is not skipped. */
+  /**
+   * Styles applied to the root element when animation is not skipped.
+   * @deprecated Use `lineClasses.markAnimate` instead.
+   */
   animate: string;
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${markElementClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` instead.
+ */
 export type MarkElementClassKey = keyof MarkElementClasses;
-export interface MarkElementOwnerState {
-  id: SeriesId;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  classes?: Partial<MarkElementClasses>;
-  skipAnimation?: boolean;
-}
+/**
+ * @deprecated Use `getLineUtilityClass` instead.
+ */
 export declare function getMarkElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `lineClasses` instead.
+ */
 export declare const markElementClasses: MarkElementClasses;
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/esm/LineChart/markElementClasses.js

@@ -1,10 +1,30 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+/**
+ * @deprecated Use `LineClasses` instead.
+ */
+
+/**
+ * @deprecated Use `LineClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getLineUtilityClass` instead.
+ */
 export function getMarkElementUtilityClass(slot) {
   return generateUtilityClass('MuiMarkElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` instead.
+ */
 export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate', 'series']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export const useUtilityClasses = ownerState => {
   const {
     classes,

package/esm/PieChart/FocusedPieArc.js

@@ -4,10 +4,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["arcLabelRadius"];
 import * as React from 'react';
+import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.js";
 import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.js";
 import { PieArc, pieArcClasses } from "./PieArc.js";
+import { useUtilityClasses } from "./pieClasses.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,6 +22,7 @@ export function FocusedPieArc(props) {
     isFaded
   } = useItemHighlighted(focusedItem);
   const pieSeries = usePieSeriesContext();
+  const classes = useUtilityClasses();
   if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
     return null;
   }
@@ -44,7 +47,7 @@ export function FocusedPieArc(props) {
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
     id: series.id,
-    className: pieArcClasses.focusIndicator,
+    className: clsx(classes.focusIndicator, pieArcClasses.focusIndicator),
     dataIndex: focusedItem.dataIndex,
     isFaded: false,
     isHighlighted: false,

package/esm/PieChart/PieArc.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { type PieItemId } from "../models/index.js";
+import { type PieArcOwnerState } from "./pieClasses.js";
+export { type PieArcOwnerState };
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
 export interface PieArcClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -15,20 +19,19 @@ export interface PieArcClasses {
   /** Styles applied to the focus indicator element. */
   focusIndicator: string;
 }
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
 export type PieArcClassKey = keyof PieArcClasses;
-interface PieArcOwnerState {
-  id: PieItemId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  isFocused: boolean;
-  stroke?: string;
-  classes?: Partial<PieArcClasses>;
-}
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 export declare function getPieArcUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 export declare const pieArcClasses: PieArcClasses;
-export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
+export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'id' | 'ref'> & PieArcOwnerState & {
   cornerRadius: number;
   endAngle: number;
   innerRadius: number;

package/esm/PieChart/PieArc.js

@@ -13,11 +13,31 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useAnimatePieArc } from "../hooks/index.js";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useUtilityClasses as usePieUtilityClasses } from "./pieClasses.js";
+
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
+
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 export function getPieArcUtilityClass(slot) {
   return generateUtilityClass('MuiPieArc', slot);
 }
+
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,8 +53,7 @@ const useUtilityClasses = ownerState => {
 };
 const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
+  slot: 'Root'
 })({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${ANIMATION_DURATION_MS}ms`,
@@ -73,7 +92,8 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     isHighlighted,
     isFocused
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = usePieUtilityClasses(ownerState);
+  const deprecatedClasses = useUtilityClasses(ownerState);
   const interactionProps = useInteractionItemProps({
     type: 'pie',
     seriesId: id,
@@ -93,10 +113,10 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: clsx(classes.root, className),
-    fill: ownerState.color,
-    opacity: ownerState.isFaded ? 0.3 : 1,
-    filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    className: clsx(classes.arc, deprecatedClasses.root, className),
+    fill: color,
+    opacity: isFaded ? 0.3 : 1,
+    filter: isHighlighted ? 'brightness(120%)' : 'none',
     stroke: stroke,
     strokeWidth: 1,
     strokeLinejoin: "round",

package/esm/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { type PieItemId } from "../models/seriesType/pie.js";
+import { type PieItemId } from "../models/index.js";
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -7,7 +10,9 @@ export interface PieArcLabelClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
-  /** Styles applied to the root element when animation is not skipped. */
+  /** Styles applied to the root element when animation is not skipped.
+   * @deprecated Use the `animate` class from `./pieClasses` instead.
+   */
   animate: string;
   /**
    * Styles applied to the root element for a specified series.
@@ -15,6 +20,9 @@ export interface PieArcLabelClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
   id: PieItemId;
@@ -24,7 +32,13 @@ interface PieArcLabelOwnerState {
   skipAnimation: boolean;
   classes?: Partial<PieArcLabelClasses>;
 }
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 export declare function getPieArcLabelUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 export declare const pieArcLabelClasses: PieArcLabelClasses;
 export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
   startAngle: number;

package/esm/PieChart/PieArcLabel.js

@@ -2,20 +2,41 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useAnimatePieArcLabel } from "../hooks/animation/useAnimatePieArcLabel.js";
+import { pieClasses, useUtilityClasses as usePieUtilityClasses } from "./pieClasses.js";
+
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
+
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
 }
+
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,7 +66,7 @@ const PieArcLabelRoot = styled('text', {
   transitionDuration: `${ANIMATION_DURATION_MS}ms`,
   transitionProperty: 'opacity',
   transitionTimingFunction: ANIMATION_TIMING_FUNCTION,
-  [`&.${pieArcLabelClasses.animate}`]: {
+  [`&.${pieClasses.animate}`]: {
     animationDuration: `${ANIMATION_DURATION_MS}ms`
   },
   '@keyframes animate-opacity': {
@@ -68,7 +89,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
       isHighlighted,
       isFaded,
       skipAnimation,
-      hidden
+      hidden,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -79,7 +101,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     isHighlighted,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = usePieUtilityClasses(ownerState);
+  const deprecatedClasses = useUtilityClasses(ownerState);
   const animatedProps = useAnimatePieArcLabel({
     cornerRadius,
     startAngle,
@@ -91,7 +114,9 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     ref
   });
   return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
-    className: classes.root
+    className: clsx(classes.arcLabel, deprecatedClasses.root, className),
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
   }, other, animatedProps, {
     opacity: hidden ? 0 : 1,
     children: formattedArcLabel

package/esm/PieChart/PieArcLabelPlot.js

@@ -5,6 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { PieArcLabel } from "./PieArcLabel.js";
 import { getLabel } from "../internals/getLabel.js";
@@ -31,6 +32,10 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
       }));
   }
 }
+const PieArcLabelPlotRoot = styled('g', {
+  name: 'MuiPieArcLabelPlot',
+  slot: 'Root'
+})();
 function PieArcLabelPlot(props) {
   const {
       arcLabel,
@@ -66,7 +71,7 @@ function PieArcLabelPlot(props) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  return /*#__PURE__*/_jsx(PieArcLabelPlotRoot, _extends({}, other, {
     children: transformedData.map(item => /*#__PURE__*/_jsx(ArcLabel, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/esm/PieChart/PieArcPlot.js

@@ -5,9 +5,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { PieArc } from "./PieArc.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PieArcPlotRoot = styled('g', {
+  name: 'MuiPieArcPlot',
+  slot: 'Root'
+})();
 function PieArcPlot(props) {
   const {
       slots,
@@ -40,7 +45,7 @@ function PieArcPlot(props) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  return /*#__PURE__*/_jsx(PieArcPlotRoot, _extends({}, other, {
     children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/esm/PieChart/PiePlot.d.ts

@@ -3,6 +3,7 @@ import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieA
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/esm/PieChart/PiePlot.js

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
@@ -22,7 +23,8 @@ function PiePlot(props) {
     skipAnimation: inSkipAnimation,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    className
   } = props;
   const seriesData = usePieSeriesContext();
   const seriesLayout = usePieSeriesLayout();
@@ -36,6 +38,7 @@ function PiePlot(props) {
     seriesOrder
   } = seriesData;
   return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes.root, className),
     children: [seriesOrder.map(seriesId => {
       const {
         cornerRadius,