From 13d9de52cde365329d97c7ad57e2e59405783552 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 May 2025 16:21:11 +0200
Subject: [PATCH 1/5] [charts] Make scatter chart use data attributes

---
 docs/data/charts/heatmap/heatmap.md           |  2 -
 .../charts/scatter/ScatterCSSSelectors.js     | 40 +++++++++++++++++++
 .../charts/scatter/ScatterCSSSelectors.tsx    | 40 +++++++++++++++++++
 .../scatter/ScatterCSSSelectors.tsx.preview   | 14 +++++++
 docs/data/charts/scatter/scatter.md           | 12 +++++-
 .../x-charts/src/ScatterChart/Scatter.tsx     |  3 ++
 6 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 docs/data/charts/scatter/ScatterCSSSelectors.js
 create mode 100644 docs/data/charts/scatter/ScatterCSSSelectors.tsx
 create mode 100644 docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview

diff --git a/docs/data/charts/heatmap/heatmap.md b/docs/data/charts/heatmap/heatmap.md
index 00b06d6ca9435..e811a90531d7d 100644
--- a/docs/data/charts/heatmap/heatmap.md
+++ b/docs/data/charts/heatmap/heatmap.md
@@ -88,8 +88,6 @@ You can modify it with `slots.legend` and `slotProps.legend`.
 
 {{"demo": "HeatmapLegend.js"}}
 
-## Labels 🚧
-
 ## Custom item
 
 {{"demo": "CustomItem.js"}}
diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.js b/docs/data/charts/scatter/ScatterCSSSelectors.js
new file mode 100644
index 0000000000000..5079fb16e6ad7
--- /dev/null
+++ b/docs/data/charts/scatter/ScatterCSSSelectors.js
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+
+import { data } from './randomData';
+
+const series = [
+  {
+    id: 'series-1',
+    type: 'scatter',
+    label: 'Series A',
+    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
+    highlightScope: { highlight: 'item', fade: 'global' },
+  },
+  {
+    id: 'series-2',
+    type: 'scatter',
+    label: 'Series B',
+    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
+    highlightScope: { highlight: 'item', fade: 'global' },
+  },
+];
+
+export default function ScatterCSSSelectors() {
+  return (
+    <ScatterChart
+      height={300}
+      series={series}
+      sx={{
+        '& [data-faded=true]': {
+          opacity: 0.2,
+        },
+        "& [data-series-id='series-1'][data-highlighted=true]": {
+          stroke: 'blue',
+          strokeWidth: 3,
+          fill: 'none',
+        },
+      }}
+    />
+  );
+}
diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.tsx b/docs/data/charts/scatter/ScatterCSSSelectors.tsx
new file mode 100644
index 0000000000000..0778013c97ada
--- /dev/null
+++ b/docs/data/charts/scatter/ScatterCSSSelectors.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { ScatterSeriesType } from '@mui/x-charts/models';
+import { data } from './randomData';
+
+const series: ScatterSeriesType[] = [
+  {
+    id: 'series-1',
+    type: 'scatter',
+    label: 'Series A',
+    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
+    highlightScope: { highlight: 'item', fade: 'global' },
+  },
+  {
+    id: 'series-2',
+    type: 'scatter',
+    label: 'Series B',
+    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
+    highlightScope: { highlight: 'item', fade: 'global' },
+  },
+];
+
+export default function ScatterCSSSelectors() {
+  return (
+    <ScatterChart
+      height={300}
+      series={series}
+      sx={{
+        '& [data-faded=true]': {
+          opacity: 0.2,
+        },
+        "& [data-series-id='series-1'][data-highlighted=true]": {
+          stroke: 'blue',
+          strokeWidth: 3,
+          fill: 'none',
+        },
+      }}
+    />
+  );
+}
diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview b/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview
new file mode 100644
index 0000000000000..ce320e3b99d57
--- /dev/null
+++ b/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview
@@ -0,0 +1,14 @@
+<ScatterChart
+  height={300}
+  series={series}
+  sx={{
+    '& [data-faded=true]': {
+      opacity: 0.2,
+    },
+    "& [data-series-id='series-1'][data-highlighted=true]": {
+      stroke: 'blue',
+      strokeWidth: 3,
+      fill: 'none',
+    },
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index 2f475465cd8b6..a04d4c03712c6 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -105,7 +105,17 @@ See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information
 
 {{"demo": "GridDemo.js"}}
 
-### CSS 🚧
+### CSS
+
+You can target scatter elements with CSS selector by using the following data attributes:
+
+- `data-series-id='<series id>'`
+- `data-highlighted=true|false`
+- `data-faded=true|false`
+
+Here is an example the modify how highlight impact items.
+
+{{"demo": "ScatterCSSSelectors.js"}}
 
 ### Shape
 
diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
index 7f197939fa65a..112e304a4365d 100644
--- a/packages/x-charts/src/ScatterChart/Scatter.tsx
+++ b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -154,6 +154,9 @@ function Scatter(props: ScatterProps) {
                 dataIndex: dataPoint.dataIndex,
               }))
           }
+          data-series-id={series.id}
+          data-highlighted={dataPoint.isHighlighted}
+          data-faded={dataPoint.isFaded}
           {...interactionItemProps[i]}
           {...markerProps}
         />

From ede8cdb9c07a80b51468b8981e74170b801ed42e Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Mon, 2 Jun 2025 10:43:06 +0200
Subject: [PATCH 2/5] test

---
 packages/x-charts/src/ScatterChart/Scatter.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
index 112e304a4365d..7d61c669e934d 100644
--- a/packages/x-charts/src/ScatterChart/Scatter.tsx
+++ b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -154,9 +154,10 @@ function Scatter(props: ScatterProps) {
                 dataIndex: dataPoint.dataIndex,
               }))
           }
-          data-series-id={series.id}
-          data-highlighted={dataPoint.isHighlighted}
-          data-faded={dataPoint.isFaded}
+          data-series={series.id}
+          data-index={dataPoint.dataIndex}
+          data-highlighted={dataPoint.isHighlighted || undefined}
+          data-faded={dataPoint.isFaded || undefined}
           {...interactionItemProps[i]}
           {...markerProps}
         />

From 75ca717933a24393db453a18cf4efdaf1151b346 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Tue, 10 Jun 2025 12:43:05 +0200
Subject: [PATCH 3/5] test

---
 packages/x-charts/src/ScatterChart/Scatter.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
index 7d61c669e934d..bea6e52d8c78f 100644
--- a/packages/x-charts/src/ScatterChart/Scatter.tsx
+++ b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -135,7 +135,7 @@ function Scatter(props: ScatterProps) {
   });
 
   return (
-    <g>
+    <g data-series={series.id}>
       {cleanData.map((dataPoint, i) => (
         <Marker
           key={dataPoint.id ?? dataPoint.dataIndex}
@@ -154,8 +154,6 @@ function Scatter(props: ScatterProps) {
                 dataIndex: dataPoint.dataIndex,
               }))
           }
-          data-series={series.id}
-          data-index={dataPoint.dataIndex}
           data-highlighted={dataPoint.isHighlighted || undefined}
           data-faded={dataPoint.isFaded || undefined}
           {...interactionItemProps[i]}

From 95acd701b20c3aeca3c0761ab090ac16e210ac84 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 11 Jun 2025 10:45:18 +0200
Subject: [PATCH 4/5] feedback

---
 .../charts/scatter/ScatterCSSSelectors.js     |  8 +++----
 .../charts/scatter/ScatterCSSSelectors.tsx    |  8 +++----
 .../scatter/ScatterCSSSelectors.tsx.preview   |  8 +++----
 docs/data/charts/scatter/scatter.md           | 12 ++++++----
 docs/pages/x/api/charts/scatter.json          |  9 ++++++-
 .../api-docs/charts/scatter/scatter.json      |  2 +-
 .../x-charts/src/ScatterChart/Scatter.tsx     | 19 +++++++++++++--
 packages/x-charts/src/ScatterChart/index.ts   |  2 ++
 .../src/ScatterChart/scatterClasses.ts        | 24 +++++++++++++++++++
 scripts/x-charts-pro.exports.json             |  2 ++
 scripts/x-charts.exports.json                 |  2 ++
 11 files changed, 75 insertions(+), 21 deletions(-)
 create mode 100644 packages/x-charts/src/ScatterChart/scatterClasses.ts

diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.js b/docs/data/charts/scatter/ScatterCSSSelectors.js
index 5079fb16e6ad7..a07c2cac0dc44 100644
--- a/docs/data/charts/scatter/ScatterCSSSelectors.js
+++ b/docs/data/charts/scatter/ScatterCSSSelectors.js
@@ -24,12 +24,12 @@ export default function ScatterCSSSelectors() {
   return (
     <ScatterChart
       height={300}
+      voronoiMaxRadius={30}
       series={series}
       sx={{
-        '& [data-faded=true]': {
-          opacity: 0.2,
-        },
-        "& [data-series-id='series-1'][data-highlighted=true]": {
+        '& [data-faded=true]': { opacity: 0.4 },
+        "& [data-series='series-1'] [data-faded=true]": { fill: 'gray' },
+        "& [data-series='series-1'] [data-highlighted=true]": {
           stroke: 'blue',
           strokeWidth: 3,
           fill: 'none',
diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.tsx b/docs/data/charts/scatter/ScatterCSSSelectors.tsx
index 0778013c97ada..e35c5c6f833d6 100644
--- a/docs/data/charts/scatter/ScatterCSSSelectors.tsx
+++ b/docs/data/charts/scatter/ScatterCSSSelectors.tsx
@@ -24,12 +24,12 @@ export default function ScatterCSSSelectors() {
   return (
     <ScatterChart
       height={300}
+      voronoiMaxRadius={30}
       series={series}
       sx={{
-        '& [data-faded=true]': {
-          opacity: 0.2,
-        },
-        "& [data-series-id='series-1'][data-highlighted=true]": {
+        '& [data-faded=true]': { opacity: 0.4 },
+        "& [data-series='series-1'] [data-faded=true]": { fill: 'gray' },
+        "& [data-series='series-1'] [data-highlighted=true]": {
           stroke: 'blue',
           strokeWidth: 3,
           fill: 'none',
diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview b/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview
index ce320e3b99d57..a10bad456ce7d 100644
--- a/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview
+++ b/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview
@@ -1,11 +1,11 @@
 <ScatterChart
   height={300}
+  voronoiMaxRadius={30}
   series={series}
   sx={{
-    '& [data-faded=true]': {
-      opacity: 0.2,
-    },
-    "& [data-series-id='series-1'][data-highlighted=true]": {
+    '& [data-faded=true]': { opacity: 0.4 },
+    "& [data-series='series-1'] [data-faded=true]": { fill: 'gray' },
+    "& [data-series='series-1'] [data-highlighted=true]": {
       stroke: 'blue',
       strokeWidth: 3,
       fill: 'none',
diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index a04d4c03712c6..96b4a27ad16b0 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -107,13 +107,15 @@ See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information
 
 ### CSS
 
-You can target scatter elements with CSS selector by using the following data attributes:
+You can target scatter markers with the following CSS selectors:
 
-- `data-series-id='<series id>'`
-- `data-highlighted=true|false`
-- `data-faded=true|false`
+- `[data-series='<series id>']` Selects the group containing markers of the series with the given id.
+- `[data-highlighted=true]` Selects markers with highlighted state.
+- `[data-faded=true]` Selects markers with faded state.
 
-Here is an example the modify how highlight impact items.
+To select all marker groups, use the `scatterClasses.root` classe name.
+
+Here is an example that customizes the look of highlighted items depending on the series they belong to.
 
 {{"demo": "ScatterCSSSelectors.js"}}
 
diff --git a/docs/pages/x/api/charts/scatter.json b/docs/pages/x/api/charts/scatter.json
index 15e0508d59cff..ba4db1ddbedb7 100644
--- a/docs/pages/x/api/charts/scatter.json
+++ b/docs/pages/x/api/charts/scatter.json
@@ -22,7 +22,14 @@
       "class": null
     }
   ],
-  "classes": [],
+  "classes": [
+    {
+      "key": "root",
+      "className": "MuiScatter-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    }
+  ],
   "muiName": "MuiScatter",
   "filename": "/packages/x-charts/src/ScatterChart/Scatter.tsx",
   "inheritance": null,
diff --git a/docs/translations/api-docs/charts/scatter/scatter.json b/docs/translations/api-docs/charts/scatter/scatter.json
index 51a7cfda14eb4..a62c1dca2281f 100644
--- a/docs/translations/api-docs/charts/scatter/scatter.json
+++ b/docs/translations/api-docs/charts/scatter/scatter.json
@@ -9,6 +9,6 @@
       }
     }
   },
-  "classDescriptions": {},
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
   "slotDescriptions": { "marker": "The component that renders the marker for a scatter point." }
 }
diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
index bea6e52d8c78f..e7833f2c2cf49 100644
--- a/packages/x-charts/src/ScatterChart/Scatter.tsx
+++ b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -22,6 +22,7 @@ import { useChartContext } from '../context/ChartProvider';
 import { ScatterMarker } from './ScatterMarker';
 import { SeriesId } from '../models/seriesType/common';
 import { ColorGetter } from '../internals/plugins/models/seriesConfig';
+import { ScatterClasses, useUtilityClasses } from './scatterClasses';
 
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
@@ -38,6 +39,7 @@ export interface ScatterProps {
     event: React.MouseEvent<SVGElement, MouseEvent>,
     scatterItemIdentifier: ScatterItemIdentifier,
   ) => void;
+  classes?: Partial<ScatterClasses>;
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;
 }
@@ -57,7 +59,17 @@ export interface ScatterSlotProps extends ScatterMarkerSlotProps {}
  * - [Scatter API](https://mui.com/x/api/charts/scatter/)
  */
 function Scatter(props: ScatterProps) {
-  const { series, xScale, yScale, color, colorGetter, onItemClick, slots, slotProps } = props;
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    onItemClick,
+    classes: inClasses,
+    slots,
+    slotProps,
+  } = props;
 
   const { instance } = useChartContext();
   const store = useStore<[UseChartVoronoiSignature]>();
@@ -134,8 +146,10 @@ function Scatter(props: ScatterProps) {
     ownerState: {},
   });
 
+  const classes = useUtilityClasses(inClasses);
+
   return (
-    <g data-series={series.id}>
+    <g data-series={series.id} className={classes.root}>
       {cleanData.map((dataPoint, i) => (
         <Marker
           key={dataPoint.id ?? dataPoint.dataIndex}
@@ -169,6 +183,7 @@ Scatter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  classes: PropTypes.object,
   color: PropTypes.string.isRequired,
   colorGetter: PropTypes.func,
   /**
diff --git a/packages/x-charts/src/ScatterChart/index.ts b/packages/x-charts/src/ScatterChart/index.ts
index 7ec13f07c6321..77afe70eb8cbb 100644
--- a/packages/x-charts/src/ScatterChart/index.ts
+++ b/packages/x-charts/src/ScatterChart/index.ts
@@ -3,3 +3,5 @@ export * from './ScatterPlot';
 export * from './Scatter';
 export * from './ScatterMarker.types';
 export * from './ScatterMarker';
+export type { ScatterClasses } from './scatterClasses';
+export { scatterClasses } from './scatterClasses';
diff --git a/packages/x-charts/src/ScatterChart/scatterClasses.ts b/packages/x-charts/src/ScatterChart/scatterClasses.ts
new file mode 100644
index 0000000000000..bcd4147a6ac12
--- /dev/null
+++ b/packages/x-charts/src/ScatterChart/scatterClasses.ts
@@ -0,0 +1,24 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+export interface ScatterClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+
+export type ScatterClassKey = keyof ScatterClasses;
+
+export function getScatterUtilityClass(slot: string) {
+  return generateUtilityClass('MuiScatter', slot);
+}
+
+export const scatterClasses: ScatterClasses = generateUtilityClasses('MuiScatter', ['root']);
+
+export const useUtilityClasses = (classes?: Partial<ScatterClasses>) => {
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getScatterUtilityClass, classes);
+};
diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json
index 69b3e70a3a972..060b20536fa55 100644
--- a/scripts/x-charts-pro.exports.json
+++ b/scripts/x-charts-pro.exports.json
@@ -380,6 +380,8 @@
   { "name": "ScatterChartProSlots", "kind": "Interface" },
   { "name": "ScatterChartSlotProps", "kind": "Interface" },
   { "name": "ScatterChartSlots", "kind": "Interface" },
+  { "name": "scatterClasses", "kind": "Variable" },
+  { "name": "ScatterClasses", "kind": "Interface" },
   { "name": "ScatterItemIdentifier", "kind": "TypeAlias" },
   { "name": "ScatterMarker", "kind": "Function" },
   { "name": "ScatterMarkerProps", "kind": "Interface" },
diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
index f8d6ec6d28653..71c231e7b57a9 100644
--- a/scripts/x-charts.exports.json
+++ b/scripts/x-charts.exports.json
@@ -335,6 +335,8 @@
   { "name": "ScatterChartProps", "kind": "Interface" },
   { "name": "ScatterChartSlotProps", "kind": "Interface" },
   { "name": "ScatterChartSlots", "kind": "Interface" },
+  { "name": "scatterClasses", "kind": "Variable" },
+  { "name": "ScatterClasses", "kind": "Interface" },
   { "name": "ScatterItemIdentifier", "kind": "TypeAlias" },
   { "name": "ScatterMarker", "kind": "Function" },
   { "name": "ScatterMarkerProps", "kind": "Interface" },

From 561e4a082da9a16562d9cd6c0ce47d70f45e8ab5 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Fri, 13 Jun 2025 09:34:18 +0200
Subject: [PATCH 5/5] typo

---
 docs/data/charts/scatter/scatter.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index 96b4a27ad16b0..59dae0e4841b4 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -113,7 +113,7 @@ You can target scatter markers with the following CSS selectors:
 - `[data-highlighted=true]` Selects markers with highlighted state.
 - `[data-faded=true]` Selects markers with faded state.
 
-To select all marker groups, use the `scatterClasses.root` classe name.
+To select all marker groups, use the `scatterClasses.root` class name.
 
 Here is an example that customizes the look of highlighted items depending on the series they belong to.