@mui/x-charts 8.27.4 → 8.27.5

package/LineChart/LineHighlightElement.d.ts

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
 export interface LineHighlightElementClasses {
   /** Styles applied to the root element. */
   root: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type HighlightElementClassKey = keyof LineHighlightElementClasses;
 interface LineHighlightElementCommonProps {
   id: SeriesId;
@@ -12,7 +18,13 @@ interface LineHighlightElementCommonProps {
   y: number;
   classes?: Partial<LineHighlightElementClasses>;
 }
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 export declare function getHighlightElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 export declare const lineHighlightElementClasses: LineHighlightElementClasses;
 export type LineHighlightElementProps = (LineHighlightElementCommonProps & ({
   shape: 'circle';

package/LineChart/LineHighlightElement.js

@@ -19,13 +19,31 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _getSymbol = require("../internals/getSymbol");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "shape"];
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 function getHighlightElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 const lineHighlightElementClasses = exports.lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
+const useDeprecatedUtilityClasses = ownerState => {
   const {
     classes,
     id
@@ -53,7 +71,8 @@ function LineHighlightElement(props) {
       shape
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  const deprecatedClasses = useDeprecatedUtilityClasses(props);
   const Element = shape === 'circle' ? 'circle' : 'path';
   const additionalProps = shape === 'circle' ? {
     cx: 0,
@@ -71,7 +90,7 @@ function LineHighlightElement(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
     pointerEvents: "none",
-    className: classes.root,
+    className: `${classes.highlight} ${deprecatedClasses.root}`,
     transform: `translate(${x} ${y})`,
     fill: color
   }, transformOrigin, additionalProps, other));

package/LineChart/LinePlot.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 _LineElement = require("./LineElement");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useLinePlotData = require("./useLinePlotData");
 var _animation = require("../internals/animation/animation");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
 const LinePlotRoot = (0, _styles.styled)('g', {
-  name: 'MuiAreaPlot',
+  name: 'MuiLinePlot',
   slot: 'Root'
 })({
-  [`& .${_LineElement.lineElementClasses.root}`]: {
+  [`& .${_lineClasses.lineClasses.line}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -55,13 +57,17 @@ function LinePlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      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)(LinePlotRoot, (0, _extends2.default)({}, other, {
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.linePlot, className)
+  }, other, {
     children: completedData.map(({
       d,
       seriesId,

package/LineChart/MarkElement.js

@@ -17,6 +17,7 @@ var _animation = require("../internals/animation/animation");
 var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
 const MarkElementPath = (0, _styles.styled)('path', {
@@ -71,14 +72,18 @@ function MarkElement(props) {
     isFaded,
     skipAnimation
   };
-  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)({
+    skipAnimation,
+    classes: innerClasses
+  });
+  const deprecatedClasses = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
     style: (0, _extends2.default)({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
     }),
     ownerState: ownerState,
-    className: classes.root,
+    className: `${classes.mark} ${deprecatedClasses.root}`,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
@@ -86,6 +91,8 @@ function MarkElement(props) {
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
+    "data-series-id": id,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1,
     strokeWidth: 2,
     stroke: color

package/LineChart/MarkPlot.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _CircleMarkElement = require("./CircleMarkElement");
 var _MarkElement = require("./MarkElement");
@@ -19,8 +21,14 @@ var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _ChartProvider = require("../context/ChartProvider");
 var _useMarkPlotData = require("./useMarkPlotData");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
+const MarkPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiMarkPlot',
+  slot: 'Root'
+})({});
+
 /**
  * Demos:
  *
@@ -36,7 +44,8 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
@@ -70,7 +79,10 @@ function MarkPlot(props) {
     return rep;
   }, [xAxisHighlightIndexes]);
   const completedData = (0, _useMarkPlotData.useMarkPlotData)(xAxis, yAxis);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkPlotRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.markPlot, className)
+  }, other, {
     children: completedData.map(({
       seriesId,
       clipId,

package/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, getLineUtilityClass } from "./lineClasses.js";
+export type { LineClassKey, LineClasses } from "./lineClasses.js";

package/LineChart/index.js

@@ -5,14 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   getMarkElementUtilityClass: true,
-  markElementClasses: true
+  markElementClasses: true,
+  lineClasses: true,
+  getLineUtilityClass: true
 };
+Object.defineProperty(exports, "getLineUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _lineClasses.getLineUtilityClass;
+  }
+});
 Object.defineProperty(exports, "getMarkElementUtilityClass", {
   enumerable: true,
   get: function () {
     return _markElementClasses.getMarkElementUtilityClass;
   }
 });
+Object.defineProperty(exports, "lineClasses", {
+  enumerable: true,
+  get: function () {
+    return _lineClasses.lineClasses;
+  }
+});
 Object.defineProperty(exports, "markElementClasses", {
   enumerable: true,
   get: function () {
@@ -175,4 +189,5 @@ Object.keys(_LineChart2).forEach(function (key) {
     }
   });
 });
-var _markElementClasses = require("./markElementClasses");
+var _markElementClasses = require("./markElementClasses");
+var _lineClasses = require("./lineClasses");

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLineUtilityClass = getLineUtilityClass;
+exports.useUtilityClasses = exports.lineClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLineUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiLineChart', slot);
+}
+const lineClasses = exports.lineClasses = (0, _generateUtilityClasses.default)('MuiLineChart', ['area', 'line', 'mark', 'markAnimate', 'highlight', 'areaPlot', 'linePlot', 'markPlot']);
+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 (0, _composeClasses.default)(slots, getLineUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/LineChart/markElementClasses.d.ts

@@ -1,4 +1,8 @@
-import { type SeriesId } from "../models/seriesType/common.js";
+import type { MarkElementOwnerState } from "./lineClasses.js";
+export { type MarkElementOwnerState };
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
 export interface MarkElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -14,14 +18,19 @@ export interface MarkElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type MarkElementClassKey = keyof MarkElementClasses;
-export interface MarkElementOwnerState {
-  id: SeriesId;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  classes?: Partial<MarkElementClasses>;
-  skipAnimation?: boolean;
-}
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 export declare function getMarkElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 export declare const markElementClasses: MarkElementClasses;
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/LineChart/markElementClasses.js

@@ -9,10 +9,29 @@ exports.useUtilityClasses = exports.markElementClasses = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
+
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 function getMarkElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate', 'series']);
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/ScatterChart/BatchScatter.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
-import { type ScatterClasses } from "./scatterClasses.js";
+import type { ScatterClasses } from "./scatterClasses.js";
 import { type ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
@@ -9,6 +9,7 @@ export interface BatchScatterProps {
   color: string;
   colorGetter?: ColorGetter<'scatter'>;
   classes?: Partial<ScatterClasses>;
+  className?: string;
 }
 export interface BatchScatterPathsProps {
   series: DefaultizedScatterSeriesType;

package/ScatterChart/BatchScatter.js

@@ -1,12 +1,14 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BatchScatter = BatchScatter;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
@@ -113,7 +115,7 @@ function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
-    classes: inClasses
+    className
   } = props;
   const {
     store
@@ -124,7 +126,7 @@ function BatchScatter(props) {
   const seriesUnfadedItem = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
-  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _scatterClasses.useUtilityClasses)(props);
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
@@ -147,7 +149,7 @@ function BatchScatter(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
-      className: classes.root,
+      className: (0, _clsx.default)(classes.series, className),
       "data-series": series.id,
       "data-faded": isSeriesFaded || undefined,
       "data-highlighted": isSeriesHighlighted || undefined,

package/ScatterChart/FocusedScatterMark.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function FocusedScatterMark(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/FocusedScatterMark.js

@@ -1,19 +1,27 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusedScatterMark = FocusedScatterMark;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _hooks = require("../hooks");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-function FocusedScatterMark(props) {
+const _excluded = ["className"];
+function FocusedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
   const scatterSeries = (0, _hooks.useScatterSeriesContext)();
@@ -25,6 +33,7 @@ function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
+  const classes = (0, _scatterClasses.useUtilityClasses)();
   if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
@@ -38,6 +47,7 @@ function FocusedScatterMark(props) {
   const y = getYPosition(scatterPoint.y);
   const size = series.markerSize + 3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,

package/ScatterChart/Scatter.d.ts

@@ -3,7 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
 import { type ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
-import { type ScatterClasses } from "./scatterClasses.js";
+import type { ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/ScatterChart/Scatter.js

@@ -11,6 +11,7 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
@@ -65,14 +66,17 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
-  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _scatterClasses.useUtilityClasses)({
+    classes: inClasses
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
-    className: classes.root,
+    className: classes.series,
     children: scatterPlotData.map(dataPoint => {
       const isItemHighlighted = isHighlighted(dataPoint);
       const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
+        className: (0, _clsx.default)(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,

package/ScatterChart/ScatterPlot.d.ts

@@ -7,7 +7,8 @@ export interface ScatterPlotSlotProps extends ScatterSlotProps {
   scatter?: Partial<ScatterProps>;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
-export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
+export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/ScatterChart/ScatterPlot.js

@@ -10,13 +10,21 @@ exports.ScatterPlot = ScatterPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
 var _Scatter = require("./Scatter");
 var _useScatterSeries = require("../hooks/useScatterSeries");
 var _hooks = require("../hooks");
 var _useZAxis = require("../hooks/useZAxis");
 var _seriesConfig = require("./seriesConfig");
 var _BatchScatter = require("./BatchScatter");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const ScatterPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiScatterPlot',
+  slot: 'Root'
+})();
+
 /**
  * Demos:
  *
@@ -32,7 +40,9 @@ function ScatterPlot(props) {
     slots,
     slotProps,
     onItemClick,
-    renderer
+    renderer,
+    className,
+    classes: inClasses
   } = props;
   const seriesData = (0, _useScatterSeries.useScatterSeriesContext)();
   const {
@@ -47,6 +57,9 @@ function ScatterPlot(props) {
     zAxis,
     zAxisIds
   } = (0, _useZAxis.useZAxes)();
+  const classes = (0, _scatterClasses.useUtilityClasses)({
+    classes: inClasses
+  });
   if (seriesData === undefined) {
     return null;
   }
@@ -59,7 +72,8 @@ function ScatterPlot(props) {
   const defaultZAxisId = zAxisIds[0];
   const DefaultScatterItems = renderer === 'svg-batch' ? _BatchScatter.BatchScatter : _Scatter.Scatter;
   const ScatterItems = slots?.scatter ?? DefaultScatterItems;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterPlotRoot, {
+    className: (0, _clsx.default)(classes.root, className),
     children: seriesOrder.map(seriesId => {
       const {
         id,

package/ScatterChart/index.d.ts

@@ -5,5 +5,5 @@ export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
 export * from "./FocusedScatterMark.js";
 export * from "./ScatterChart.plugins.js";
-export type { ScatterClasses } from "./scatterClasses.js";
-export { scatterClasses } from "./scatterClasses.js";
+export { scatterClasses, getScatterUtilityClass } from "./scatterClasses.js";
+export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.js";

package/ScatterChart/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  scatterClasses: true
+  scatterClasses: true,
+  getScatterUtilityClass: true
 };
+Object.defineProperty(exports, "getScatterUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _scatterClasses.getScatterUtilityClass;
+  }
+});
 Object.defineProperty(exports, "scatterClasses", {
   enumerable: true,
   get: function () {