[charts] Make scatter chart use data attributes

docs/data/charts/heatmap/heatmap.md

@@ -92,8 +92,6 @@ You can modify it with `slots.legend` and `slotProps.legend`.
 
 {{"demo": "HeatmapLegend.js"}}
 
-## Labels 🚧
-
 ## Custom item
 
 {{"demo": "CustomItem.js"}}

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}
+      voronoiMaxRadius={30}
+      series={series}
+      sx={{
+        '& [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',
+        },
+      }}
+    />
+  );
+}

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}
+      voronoiMaxRadius={30}
+      series={series}
+      sx={{
+        '& [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',
+        },
+      }}
+    />
+  );
+}

docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview

@@ -0,0 +1,14 @@
+<ScatterChart
+  height={300}
+  voronoiMaxRadius={30}
+  series={series}
+  sx={{
+    '& [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',
+    },
+  }}
+/>

docs/data/charts/scatter/scatter.md

@@ -105,7 +105,19 @@ See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information
 
 {{"demo": "GridDemo.js"}}
 
-### CSS 🚧
+### CSS
+
+You can target scatter markers with the following CSS selectors:
+
+- `[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.
+
+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.
+
+{{"demo": "ScatterCSSSelectors.js"}}
 
 ### Shape
 

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,

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." }
 }

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>
+    <g data-series={series.id} className={classes.root}>
       {cleanData.map((dataPoint, i) => (
         <Marker
           key={dataPoint.id ?? dataPoint.dataIndex}
@@ -154,6 +168,8 @@ function Scatter(props: ScatterProps) {
                 dataIndex: dataPoint.dataIndex,
               }))
           }
+          data-highlighted={dataPoint.isHighlighted || undefined}
+          data-faded={dataPoint.isFaded || undefined}
           {...interactionItemProps[i]}
           {...markerProps}
         />
@@ -167,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,
   /**

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';

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);
+};

scripts/x-charts-pro.exports.json

@@ -393,6 +393,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" },

scripts/x-charts.exports.json

@@ -339,6 +339,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" },