[docs] Document how to hide the legend (#10951) (#10954)

docs/data/charts/legend/HiddenLegend.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { PieChart } from '@mui/x-charts/PieChart';
+
+const series = [
+  {
+    data: [
+      { id: 0, value: 10, label: 'series A' },
+      { id: 1, value: 15, label: 'series B' },
+      { id: 2, value: 20, label: 'series C' },
+    ],
+  },
+];
+
+export default function HiddenLegend() {
+  const [isHidden, setIsHidden] = React.useState(false);
+
+  return (
+    <Stack>
+      <FormControlLabel
+        checked={isHidden}
+        control={
+          <Checkbox onChange={(event) => setIsHidden(event.target.checked)} />
+        }
+        label="hide the legend"
+        labelPlacement="end"
+      />
+      <PieChart
+        series={series}
+        slotProps={{ legend: { hidden: isHidden } }}
+        width={400}
+        height={200}
+      />
+    </Stack>
+  );
+}

docs/data/charts/legend/HiddenLegend.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { PieChart } from '@mui/x-charts/PieChart';
+
+const series = [
+  {
+    data: [
+      { id: 0, value: 10, label: 'series A' },
+      { id: 1, value: 15, label: 'series B' },
+      { id: 2, value: 20, label: 'series C' },
+    ],
+  },
+];
+
+export default function HiddenLegend() {
+  const [isHidden, setIsHidden] = React.useState(false);
+
+  return (
+    <Stack>
+      <FormControlLabel
+        checked={isHidden}
+        control={
+          <Checkbox onChange={(event) => setIsHidden(event.target.checked)} />
+        }
+        label="hide the legend"
+        labelPlacement="end"
+      />
+      <PieChart
+        series={series}
+        slotProps={{ legend: { hidden: isHidden } }}
+        width={400}
+        height={200}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,14 @@
+<FormControlLabel
+  checked={isHidden}
+  control={
+    <Checkbox onChange={(event) => setIsHidden(event.target.checked)} />
+  }
+  label="hide the legend"
+  labelPlacement="end"
+/>
+<PieChart
+  series={series}
+  slotProps={{ legend: { hidden: isHidden } }}
+  width={400}
+  height={200}
+/>

docs/data/charts/legend/legend.md

@@ -30,6 +30,12 @@ By default, the legend is placed above the charts.
 
 {{"demo": "LegendPositionNoSnap.js", "hideToolbar": true, "bg": "inline"}}
 
+### Hidding
+
+You can hide the legend with the property `slotProps.legend.hidden`.
+
+{{"demo": "HiddenLegend.js"}}
+
 ### Dimensions
 
 Inside the legend, you can customize the pixel value of the width and height of the mark with the `itemMarkWidth` and `itemMarkHeight` props.

packages/x-charts/src/ChartsLegend/ChartsLegend.tsx

@@ -28,6 +28,7 @@ export type ChartsLegendProps = {
   classes?: Partial<ChartsLegendClasses>;
   /**
    * Set to true to hide the legend.
+   * @default false
    */
   hidden?: boolean;
   /**