[charts] Introduce hideLegend prop (#15277)

mui · Nov 7, 2024 · f55e159 · f55e159
1 parent 6fc63cc
commit f55e159
Show file tree

Hide file tree

Showing 54 changed files with 110 additions and 46 deletions.
diff --git a/docs/data/charts/axis/MarginAndLabelPosition.js b/docs/data/charts/axis/MarginAndLabelPosition.js
@@ -71,7 +71,7 @@ export default function MarginAndLabelPosition() {
           { dataKey: '2021', label: '2021' },
           { dataKey: '2022', label: '2022' },
         ]}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
         yAxis={[
           {
             valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`,

diff --git a/docs/data/charts/axis/MarginAndLabelPosition.tsx b/docs/data/charts/axis/MarginAndLabelPosition.tsx
@@ -71,7 +71,7 @@ export default function MarginAndLabelPosition() {
           { dataKey: '2021', label: '2021' },
           { dataKey: '2022', label: '2022' },
         ]}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
         yAxis={[
           {
             valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`,

diff --git a/docs/data/charts/bars/BarGapNoSnap.js b/docs/data/charts/bars/BarGapNoSnap.js
@@ -47,7 +47,7 @@ export default function BarGapNoSnap() {
             },
           ]}
           yAxis={[{ valueFormatter: (v) => `$ ${v / 1000000}B` }]}
-          slotProps={{ legend: { hidden: true } }}
+          hideLegend
         />
       )}
       getCode={({ props }) => {

diff --git a/docs/data/charts/bars/StackBars.js b/docs/data/charts/bars/StackBars.js
@@ -16,7 +16,7 @@ export default function StackBars() {
         { dataKey: 'treas', stack: 'equity' },
       ])}
       xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-      slotProps={{ legend: { hidden: true } }}
+      hideLegend
       width={600}
       height={350}
     />

diff --git a/docs/data/charts/bars/StackBars.tsx b/docs/data/charts/bars/StackBars.tsx
@@ -16,7 +16,7 @@ export default function StackBars() {
         { dataKey: 'treas', stack: 'equity' },
       ])}
       xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-      slotProps={{ legend: { hidden: true } }}
+      hideLegend
       width={600}
       height={350}
     />

diff --git a/docs/data/charts/bars/StackBars.tsx.preview b/docs/data/charts/bars/StackBars.tsx.preview
@@ -10,7 +10,7 @@
     { dataKey: 'treas', stack: 'equity' },
   ])}
   xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-  slotProps={{ legend: { hidden: true } }}
+  hideLegend
   width={600}
   height={350}
 />
diff --git a/docs/data/charts/highlighting/SyncHighlight.js b/docs/data/charts/highlighting/SyncHighlight.js
@@ -37,7 +37,7 @@ const barChartsProps = {
   ],
   xAxis: [{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }],
   height: 400,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
 
 const pieChartProps = {
@@ -55,5 +55,5 @@ const pieChartProps = {
     },
   ],
   height: 400,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
diff --git a/docs/data/charts/highlighting/SyncHighlight.tsx b/docs/data/charts/highlighting/SyncHighlight.tsx
@@ -38,7 +38,7 @@ const barChartsProps: BarChartProps = {
   ],
   xAxis: [{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }],
   height: 400,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
 
 const pieChartProps: PieChartProps = {
@@ -56,5 +56,5 @@ const pieChartProps: PieChartProps = {
     },
   ],
   height: 400,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
diff --git a/docs/data/charts/legend/BasicColorLegend.js b/docs/data/charts/legend/BasicColorLegend.js
@@ -44,7 +44,7 @@ export default function BasicColorLegend() {
         grid={{ horizontal: true }}
         height={300}
         margin={{ top: 30, right: 150 }}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
       >
         <PiecewiseColorLegend
           axisDirection="x"

diff --git a/docs/data/charts/legend/BasicColorLegend.tsx b/docs/data/charts/legend/BasicColorLegend.tsx
@@ -44,7 +44,7 @@ export default function BasicColorLegend() {
         grid={{ horizontal: true }}
         height={300}
         margin={{ top: 30, right: 150 }}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
       >
         <PiecewiseColorLegend
           axisDirection="x"

diff --git a/docs/data/charts/legend/ContinuousInteractiveDemoNoSnap.js b/docs/data/charts/legend/ContinuousInteractiveDemoNoSnap.js
@@ -84,7 +84,7 @@ export default function ContinuousInteractiveDemoNoSnap() {
               top: props.direction === 'row' ? 50 : 20,
               right: props.direction === 'row' ? 20 : 50,
             }}
-            slotProps={{ legend: { hidden: true } }}
+            hideLegend
           >
             <ChartsReferenceLine y={0} />
             <ContinuousColorLegend

diff --git a/docs/data/charts/legend/PiecewiseInteractiveDemoNoSnap.js b/docs/data/charts/legend/PiecewiseInteractiveDemoNoSnap.js
@@ -71,7 +71,7 @@ export default function PiecewiseInteractiveDemoNoSnap() {
               top: props.direction === 'row' ? 50 : 20,
               right: props.direction === 'row' ? 20 : 150,
             }}
-            slotProps={{ legend: { hidden: true } }}
+            hideLegend
           >
             <ChartsReferenceLine y={0} />
             <PiecewiseColorLegend

diff --git a/docs/data/charts/lines/LineDataset.js b/docs/data/charts/lines/LineDataset.js
@@ -14,7 +14,7 @@ const stackStrategy = {
 
 const customize = {
   height: 300,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
   margin: { top: 5 },
 };
 

diff --git a/docs/data/charts/lines/LineDataset.tsx b/docs/data/charts/lines/LineDataset.tsx
@@ -14,7 +14,7 @@ const stackStrategy = {
 
 const customize = {
   height: 300,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
   margin: { top: 5 },
 };
 

diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js
@@ -13,7 +13,7 @@ const sizing = {
   margin: { right: 5 },
   width: 200,
   height: 200,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
 const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0);
 

diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx
@@ -13,7 +13,7 @@ const sizing = {
   margin: { right: 5 },
   width: 200,
   height: 200,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
 const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0);
 

diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js
@@ -24,7 +24,7 @@ export default function PieChartWithPaddingAngle() {
         margin={{ right: 5 }}
         width={200}
         height={200}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
       />
       <PieChart
         series={[
@@ -40,7 +40,7 @@ export default function PieChartWithPaddingAngle() {
         margin={{ right: 5 }}
         width={200}
         height={200}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
       />
     </Stack>
   );

diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx
@@ -24,7 +24,7 @@ export default function PieChartWithPaddingAngle() {
         margin={{ right: 5 }}
         width={200}
         height={200}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
       />
       <PieChart
         series={[
@@ -40,7 +40,7 @@ export default function PieChartWithPaddingAngle() {
         margin={{ right: 5 }}
         width={200}
         height={200}
-        slotProps={{ legend: { hidden: true } }}
+        hideLegend
       />
     </Stack>
   );

diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.js b/docs/data/charts/pie-demo/TwoLevelPieChart.js
@@ -39,7 +39,7 @@ export default function TwoLevelPieChart() {
       ]}
       width={400}
       height={300}
-      slotProps={{ legend: { hidden: true } }}
+      hideLegend
     />
   );
 }
diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx b/docs/data/charts/pie-demo/TwoLevelPieChart.tsx
@@ -38,7 +38,7 @@ export default function TwoLevelPieChart() {
       ]}
       width={400}
       height={300}
-      slotProps={{ legend: { hidden: true } }}
+      hideLegend
     />
   );
 }
diff --git a/docs/data/charts/pie-demo/TwoSimplePieChart.js b/docs/data/charts/pie-demo/TwoSimplePieChart.js
@@ -36,7 +36,7 @@ export default function TwoSimplePieChart() {
         },
       ]}
       height={300}
-      slotProps={{ legend: { hidden: true } }}
+      hideLegend
     />
   );
 }
diff --git a/docs/data/charts/pie-demo/TwoSimplePieChart.tsx b/docs/data/charts/pie-demo/TwoSimplePieChart.tsx
@@ -37,7 +37,7 @@ export default function TwoSimplePieChart() {
         },
       ]}
       height={300}
-      slotProps={{ legend: { hidden: true } }}
+      hideLegend
     />
   );
 }
diff --git a/docs/data/charts/pie/PieClickNoSnap.js b/docs/data/charts/pie/PieClickNoSnap.js
@@ -22,7 +22,7 @@ export default function PieClickNoSnap() {
           series={series}
           width={400}
           height={300}
-          slotProps={{ legend: { hidden: true } }}
+          hideLegend
           onItemClick={(event, d) => setItemData(d)}
         />{' '}
       </Box>

diff --git a/docs/data/charts/pie/PieColor.js b/docs/data/charts/pie/PieColor.js
@@ -56,5 +56,5 @@ export default function PieColor() {
 const pieParams = {
   height: 200,
   margin: { right: 5 },
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
diff --git a/docs/data/charts/pie/PieColor.tsx b/docs/data/charts/pie/PieColor.tsx
@@ -56,5 +56,5 @@ export default function PieColor() {
 const pieParams = {
   height: 200,
   margin: { right: 5 },
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
diff --git a/docs/data/charts/pie/PieShapeNoSnap.js b/docs/data/charts/pie/PieShapeNoSnap.js
@@ -29,7 +29,7 @@ export default function PieShapeNoSnap() {
           width={300}
           height={300}
           margin={{ right: 5 }}
-          slotProps={{ legend: { hidden: true } }}
+          hideLegend
         />
       )}
       getCode={({ props }) => {

diff --git a/docs/data/charts/tooltip/AxisFormatter.js b/docs/data/charts/tooltip/AxisFormatter.js
@@ -44,7 +44,7 @@ const chartParams = {
         }).format((v || 0) * 1_000_000),
     },
   ],
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
   dataset,
   width: 600,
   height: 400,

diff --git a/docs/data/charts/tooltip/AxisFormatter.tsx b/docs/data/charts/tooltip/AxisFormatter.tsx
@@ -44,7 +44,7 @@ const chartParams: BarChartProps = {
         }).format((v || 0) * 1_000_000),
     },
   ],
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
   dataset,
   width: 600,
   height: 400,

diff --git a/docs/data/charts/tooltip/Interaction.js b/docs/data/charts/tooltip/Interaction.js
@@ -16,7 +16,7 @@ const barChartsParams = {
   ],
   margin: { top: 10, right: 10 },
   height: 200,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
 export default function Interaction() {
   return (

diff --git a/docs/data/charts/tooltip/Interaction.tsx b/docs/data/charts/tooltip/Interaction.tsx
@@ -16,7 +16,7 @@ const barChartsParams = {
   ],
   margin: { top: 10, right: 10 },
   height: 200,
-  slotProps: { legend: { hidden: true } },
+  hideLegend: true,
 };
 export default function Interaction() {
   return (

diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json
@@ -30,6 +30,7 @@
       "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
     },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json
@@ -30,6 +30,7 @@
       "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
     },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json
@@ -31,6 +31,7 @@
       "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
     },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json
@@ -31,6 +31,7 @@
       "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
     },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
@@ -11,6 +11,7 @@
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json
@@ -30,6 +30,7 @@
       "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
     },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json
@@ -30,6 +30,7 @@
       "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
     },
     "height": { "type": { "name": "number" } },
+    "hideLegend": { "type": { "name": "bool" } },
     "highlightedItem": {
       "type": {
         "name": "shape",

diff --git a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json b/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json
@@ -23,6 +23,7 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
       "description": "The item currently highlighted. Turns highlighting into a controlled prop."
     },

diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json
@@ -23,6 +23,7 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
       "description": "The item currently highlighted. Turns highlighting into a controlled prop."
     },

diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json
@@ -25,6 +25,7 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
       "description": "The item currently highlighted. Turns highlighting into a controlled prop."
     },

diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json
@@ -25,6 +25,7 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
       "description": "The item currently highlighted. Turns highlighting into a controlled prop."
     },

diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json
@@ -11,6 +11,7 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
       "description": "The item currently highlighted. Turns highlighting into a controlled prop."
     },