Skip to content

Commit

Permalink
[docs] Document how to hide the legend (#10951)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexfauquette committed Nov 8, 2023
1 parent a711a0e commit e48df4c
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 0 deletions.
38 changes: 38 additions & 0 deletions docs/data/charts/legend/HiddenLegend.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
38 changes: 38 additions & 0 deletions docs/data/charts/legend/HiddenLegend.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
14 changes: 14 additions & 0 deletions docs/data/charts/legend/HiddenLegend.tsx.preview
Original file line number Diff line number Diff line change
@@ -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}
/>
6 changes: 6 additions & 0 deletions docs/data/charts/legend/legend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export type ChartsLegendProps = {
classes?: Partial<ChartsLegendClasses>;
/**
* Set to true to hide the legend.
* @default false
*/
hidden?: boolean;
/**
Expand Down

0 comments on commit e48df4c

Please sign in to comment.