[charts][docs] Add docs for rounded symbol

docs/data/charts/legend/LegendRoundedSymbol.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PieChart } from '@mui/x-charts/PieChart';
+import { legendClasses } from '@mui/x-charts/ChartsLegend';
+
+const series = [
+  {
+    data: [
+      { id: 0, value: 10, label: 'series A' },
+      { id: 1, value: 15, label: 'series B' },
+      { id: 2, value: 20, label: 'series C' },
+      { id: 3, value: 30, label: 'series D' },
+    ],
+  },
+];
+
+export default function LegendRoundedSymbol() {
+  return (
+    <PieChart
+      series={series}
+      width={400}
+      height={200}
+      sx={{
+        [`& .${legendClasses.mark}`]: {
+          ry: '50%',
+        },
+      }}
+    />
+  );
+}

docs/data/charts/legend/LegendRoundedSymbol.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PieChart } from '@mui/x-charts/PieChart';
+import { legendClasses } from '@mui/x-charts/ChartsLegend';
+
+const series = [
+  {
+    data: [
+      { id: 0, value: 10, label: 'series A' },
+      { id: 1, value: 15, label: 'series B' },
+      { id: 2, value: 20, label: 'series C' },
+      { id: 3, value: 30, label: 'series D' },
+    ],
+  },
+];
+
+export default function LegendRoundedSymbol() {
+  return (
+    <PieChart
+      series={series}
+      width={400}
+      height={200}
+      sx={{
+        [`& .${legendClasses.mark}`]: {
+          ry: '50%',
+        },
+      }}
+    />
+  );
+}

docs/data/charts/legend/LegendRoundedSymbol.tsx.preview

@@ -0,0 +1,10 @@
+<PieChart
+  series={series}
+  width={400}
+  height={200}
+  sx={{
+    [`& .${legendClasses.mark}`]: {
+      ry: '50%',
+    },
+  }}
+/>

docs/data/charts/legend/legend.md

@@ -60,6 +60,13 @@ Style applied by other means will not be taken into account.
 Which can lead to label overflow.
 :::
 
+### Rounded symbol
+
+To create a rounded symbol, use the `legendClasses.mark` to apply CSS on marks.
+Notice that SVG `rect` uses `ry` property to control the symbol's corner radius instead of `border-radius`.
+
+{{"demo": "LegendRoundedSymbol.js"}}
+
 ## Color legend
 
 To display legend associated to a [colorMap](https://mui.com/x/react-charts/styling/#values-color), you can use: