[docs] Fix remaining charts demos on mobile (#16728)

mui · Feb 25, 2025 · d697a17 · d697a17
1 parent c8b9ba4
commit d697a17
Show file tree

Hide file tree

Showing 53 changed files with 481 additions and 1,111 deletions.
diff --git a/docs/data/charts/composition/BasicComposition.js b/docs/data/charts/composition/BasicComposition.js
@@ -13,7 +13,7 @@ export default function BasicComposition() {
 
   const sizingProps = isResponsive ? {} : { width: 500, height: 300 };
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ width: '100%', overflow: 'auto' }}>
       <FormControlLabel
         checked={isResponsive}
         control={
@@ -22,8 +22,7 @@ export default function BasicComposition() {
         label="Use responsive container"
         labelPlacement="end"
       />
-      <Paper sx={{ width: '100%', height: 300 }} elevation={3}>
-        {/* @ts-ignore */}
+      <Paper sx={{ margin: 1, height: 300 }} elevation={3}>
         <ChartContainer
           series={[
             {

diff --git a/docs/data/charts/composition/BasicComposition.tsx b/docs/data/charts/composition/BasicComposition.tsx
@@ -13,7 +13,7 @@ export default function BasicComposition() {
 
   const sizingProps = isResponsive ? {} : { width: 500, height: 300 };
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ width: '100%', overflow: 'auto' }}>
       <FormControlLabel
         checked={isResponsive}
         control={
@@ -23,8 +23,7 @@ export default function BasicComposition() {
         labelPlacement="end"
       />
 
-      <Paper sx={{ width: '100%', height: 300 }} elevation={3}>
-        {/* @ts-ignore */}
+      <Paper sx={{ margin: 1, height: 300 }} elevation={3}>
         <ChartContainer
           series={[
             {

diff --git a/docs/data/charts/label/BasicLabel.js b/docs/data/charts/label/BasicLabel.js
@@ -16,7 +16,6 @@ export default function BasicLabel() {
 }
 
 const props = {
-  width: 500,
   height: 300,
   xAxis: [{ data: ['A', 'B', 'C'], scaleType: 'band' }],
 };
diff --git a/docs/data/charts/label/BasicLabel.tsx b/docs/data/charts/label/BasicLabel.tsx
@@ -16,7 +16,6 @@ export default function BasicLabel() {
 }
 
 const props = {
-  width: 500,
   height: 300,
   xAxis: [{ data: ['A', 'B', 'C'], scaleType: 'band' as const }],
 };
diff --git a/docs/data/charts/label/FunctionLabel.js b/docs/data/charts/label/FunctionLabel.js
@@ -14,7 +14,6 @@ export default function FunctionLabel() {
 }
 
 const props = {
-  width: 500,
   height: 300,
   xAxis: [{ data: ['A', 'B', 'C'], scaleType: 'band' }],
 };
diff --git a/docs/data/charts/label/FunctionLabel.tsx b/docs/data/charts/label/FunctionLabel.tsx
@@ -14,7 +14,6 @@ export default function FunctionLabel() {
 }
 
 const props = {
-  width: 500,
   height: 300,
   xAxis: [{ data: ['A', 'B', 'C'], scaleType: 'band' as const }],
 };
diff --git a/docs/data/charts/legend/BasicLegend.js b/docs/data/charts/legend/BasicLegend.js
@@ -16,7 +16,6 @@ export default function BasicLegend() {
         { type: 'scatter', label: 'Var A', data: data.slice(0, 25) },
         { type: 'scatter', label: 'Var B', data: data.slice(25) },
       ]}
-      width={400}
       height={300}
     />
   );

diff --git a/docs/data/charts/legend/BasicLegend.tsx b/docs/data/charts/legend/BasicLegend.tsx
@@ -16,7 +16,6 @@ export default function BasicLegend() {
         { type: 'scatter', label: 'Var A', data: data.slice(0, 25) },
         { type: 'scatter', label: 'Var B', data: data.slice(25) },
       ]}
-      width={400}
       height={300}
     />
   );

diff --git a/docs/data/charts/legend/BasicLegend.tsx.preview b/docs/data/charts/legend/BasicLegend.tsx.preview
@@ -3,6 +3,5 @@
     { type: 'scatter', label: 'Var A', data: data.slice(0, 25) },
     { type: 'scatter', label: 'Var B', data: data.slice(25) },
   ]}
-  width={400}
   height={300}
 />
diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js
@@ -11,7 +11,7 @@ const data = [
 
 export default function PieChartWithPaddingAngle() {
   return (
-    <Stack direction="row">
+    <Stack width="100%" direction="row" flexWrap="wrap">
       <PieChart
         series={[
           {
@@ -33,11 +33,12 @@ export default function PieChartWithPaddingAngle() {
             paddingAngle: 5,
             innerRadius: 60,
             outerRadius: 80,
+            cy: '75%',
             data,
           },
         ]}
         width={200}
-        height={200}
+        height={150}
         hideLegend
       />
     </Stack>

diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx
@@ -11,7 +11,7 @@ const data = [
 
 export default function PieChartWithPaddingAngle() {
   return (
-    <Stack direction="row">
+    <Stack width="100%" direction="row" flexWrap="wrap">
       <PieChart
         series={[
           {
@@ -33,11 +33,12 @@ export default function PieChartWithPaddingAngle() {
             paddingAngle: 5,
             innerRadius: 60,
             outerRadius: 80,
+            cy: '75%',
             data,
           },
         ]}
         width={200}
-        height={200}
+        height={150}
         hideLegend
       />
     </Stack>

diff --git a/docs/data/charts/pie-demo/StraightAnglePieChart.js b/docs/data/charts/pie-demo/StraightAnglePieChart.js
@@ -20,8 +20,8 @@ export default function StraightAnglePieChart() {
           data,
         },
       ]}
-      height={300}
-      width={300}
+      height={200}
+      width={200}
     />
   );
 }
diff --git a/docs/data/charts/pie-demo/StraightAnglePieChart.tsx b/docs/data/charts/pie-demo/StraightAnglePieChart.tsx
@@ -20,8 +20,8 @@ export default function StraightAnglePieChart() {
           data,
         },
       ]}
-      height={300}
-      width={300}
+      height={200}
+      width={200}
     />
   );
 }
diff --git a/docs/data/charts/pie-demo/StraightAnglePieChart.tsx.preview b/docs/data/charts/pie-demo/StraightAnglePieChart.tsx.preview
@@ -6,6 +6,6 @@
       data,
     },
   ]}
-  height={300}
-  width={300}
+  height={200}
+  width={200}
 />
diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.js b/docs/data/charts/pie-demo/TwoLevelPieChart.js
@@ -37,7 +37,6 @@ export default function TwoLevelPieChart() {
           data: data2,
         },
       ]}
-      width={400}
       height={300}
       hideLegend
     />

diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx b/docs/data/charts/pie-demo/TwoLevelPieChart.tsx
@@ -36,7 +36,6 @@ export default function TwoLevelPieChart() {
           data: data2,
         },
       ]}
-      width={400}
       height={300}
       hideLegend
     />

diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx.preview b/docs/data/charts/pie-demo/TwoLevelPieChart.tsx.preview
@@ -0,0 +1,16 @@
+<PieChart
+  series={[
+    {
+      innerRadius: 0,
+      outerRadius: 80,
+      data: data1,
+    },
+    {
+      innerRadius: 100,
+      outerRadius: 120,
+      data: data2,
+    },
+  ]}
+  height={300}
+  hideLegend
+/>
diff --git a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js
@@ -29,7 +29,6 @@ const data2 = [
 export default function MultipleYAxesScatterChart() {
   return (
     <ScatterChart
-      width={500}
       height={300}
       series={[
         {

diff --git a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx
@@ -28,7 +28,6 @@ const data2 = [
 export default function MultipleYAxesScatterChart() {
   return (
     <ScatterChart
-      width={500}
       height={300}
       series={[
         {

diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.js b/docs/data/charts/scatter-demo/SimpleScatterChart.js
@@ -13,7 +13,6 @@ const data = [
 export default function SimpleScatterChart() {
   return (
     <ScatterChart
-      width={500}
       height={300}
       series={[{ data, label: 'pv', id: 'pvId' }]}
       xAxis={[{ min: 0 }]}

diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx
@@ -13,7 +13,6 @@ const data = [
 export default function SimpleScatterChart() {
   return (
     <ScatterChart
-      width={500}
       height={300}
       series={[{ data, label: 'pv', id: 'pvId' }]}
       xAxis={[{ min: 0 }]}

diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview
@@ -1,5 +1,4 @@
 <ScatterChart
-  width={500}
   height={300}
   series={[{ data, label: 'pv', id: 'pvId' }]}
   xAxis={[{ min: 0 }]}