[charts] Decouple margin and axis-size

docs/data/charts/areas-demo/AreaChartConnectNulls.js

@@ -12,13 +12,11 @@ export default function AreaChartConnectNulls() {
         xAxis={[{ data: xData, scaleType: 'point' }]}
         series={[{ data, showMark: false, area: true }]}
         height={200}
-        margin={{ top: 10, bottom: 20 }}
       />
       <LineChart
         xAxis={[{ data: xData, scaleType: 'point' }]}
         series={[{ data, showMark: false, area: true, connectNulls: true }]}
         height={200}
-        margin={{ top: 10, bottom: 20 }}
       />
     </Stack>
   );

docs/data/charts/areas-demo/AreaChartConnectNulls.tsx

@@ -12,13 +12,11 @@ export default function AreaChartConnectNulls() {
         xAxis={[{ data: xData, scaleType: 'point' }]}
         series={[{ data, showMark: false, area: true }]}
         height={200}
-        margin={{ top: 10, bottom: 20 }}
       />
       <LineChart
         xAxis={[{ data: xData, scaleType: 'point' }]}
         series={[{ data, showMark: false, area: true, connectNulls: true }]}
         height={200}
-        margin={{ top: 10, bottom: 20 }}
       />
     </Stack>
   );

docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview

@@ -2,11 +2,9 @@
   xAxis={[{ data: xData, scaleType: 'point' }]}
   series={[{ data, showMark: false, area: true }]}
   height={200}
-  margin={{ top: 10, bottom: 20 }}
 />
 <LineChart
   xAxis={[{ data: xData, scaleType: 'point' }]}
   series={[{ data, showMark: false, area: true, connectNulls: true }]}
   height={200}
-  margin={{ top: 10, bottom: 20 }}
 />

docs/data/charts/areas-demo/AreaChartFillByValue.js

@@ -8,12 +8,12 @@ import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
 const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
 const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
 
-function ColorSwich({ threshold, color1, color2, id }) {
+function ColorSwitch({ threshold, color1, color2, id }) {
   const { top, height, bottom } = useDrawingArea();
   const svgHeight = top + bottom + height;
 
   const scale = useYScale(); // You can provide the axis Id if you have multiple ones
-  const y0 = scale(threshold); // The coordinate of of the origine
+  const y0 = scale(threshold); // The coordinate of the origin
   const off = y0 !== undefined ? y0 / svgHeight : 0;
 
   return (
@@ -38,41 +38,41 @@ export default function AreaChartFillByValue() {
     <Stack direction="column" width="100%" spacing={1}>
       <LineChart
         xAxis={[{ data: xData, scaleType: 'point' }]}
-        yAxis={[{ min: -3000, max: 4000 }]}
+        yAxis={[{ min: -3000, max: 4000, width: 40 }]}
         series={[{ data, showMark: false, area: true }]}
         height={200}
-        margin={{ top: 20, bottom: 30, left: 75 }}
+        margin={{ bottom: 0 }}
         sx={{
           [`& .${areaElementClasses.root}`]: {
-            fill: 'url(#swich-color-id-1)',
+            fill: 'url(#switch-color-id-1)',
             filter: 'none', // Remove the default filter.
           },
         }}
       >
-        <ColorSwich
+        <ColorSwitch
           color1="#11B678" // green
           color2="#FF3143" // red
           threshold={0}
-          id="swich-color-id-1"
+          id="switch-color-id-1"
         />
-        <rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-1)" />
+        <rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-1)" />
       </LineChart>
 
       <LineChart
         xAxis={[{ data: xData, scaleType: 'point' }]}
-        yAxis={[{ min: -3000, max: 4000 }]}
+        yAxis={[{ min: -3000, max: 4000, width: 40 }]}
         series={[{ data, showMark: false, area: true }]}
         height={200}
-        margin={{ top: 20, bottom: 30, left: 75 }}
+        margin={{ bottom: 0 }}
         sx={{
           [`& .${areaElementClasses.root}`]: {
-            fill: 'url(#swich-color-id-2)',
+            fill: 'url(#switch-color-id-2)',
             filter: 'none', // Remove the default filter.
           },
         }}
       >
-        <ColorPalette id="swich-color-id-2" />
-        <rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-2)" />
+        <ColorPalette id="switch-color-id-2" />
+        <rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-2)" />
       </LineChart>
     </Stack>
   );

docs/data/charts/areas-demo/AreaChartFillByValue.tsx

@@ -8,19 +8,19 @@ import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
 const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
 const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
 
-type ColorSwichProps = {
+type ColorSwitchProps = {
   threshold: number;
   color1: string;
   color2: string;
   id: string;
 };
 
-function ColorSwich({ threshold, color1, color2, id }: ColorSwichProps) {
+function ColorSwitch({ threshold, color1, color2, id }: ColorSwitchProps) {
   const { top, height, bottom } = useDrawingArea();
   const svgHeight = top + bottom + height;
 
   const scale = useYScale() as ScaleLinear<number, number>; // You can provide the axis Id if you have multiple ones
-  const y0 = scale(threshold); // The coordinate of of the origine
+  const y0 = scale(threshold); // The coordinate of the origin
   const off = y0 !== undefined ? y0 / svgHeight : 0;
 
   return (
@@ -45,42 +45,42 @@ export default function AreaChartFillByValue() {
     <Stack direction="column" width="100%" spacing={1}>
       <LineChart
         xAxis={[{ data: xData, scaleType: 'point' }]}
-        yAxis={[{ min: -3000, max: 4000 }]}
+        yAxis={[{ min: -3000, max: 4000, width: 40 }]}
         series={[{ data, showMark: false, area: true }]}
         height={200}
-        margin={{ top: 20, bottom: 30, left: 75 }}
+        margin={{ bottom: 0 }}
         sx={{
           [`& .${areaElementClasses.root}`]: {
-            fill: 'url(#swich-color-id-1)',
+            fill: 'url(#switch-color-id-1)',
             filter: 'none', // Remove the default filter.
           },
         }}
       >
-        <ColorSwich
+        <ColorSwitch
           color1="#11B678" // green
           color2="#FF3143" // red
           threshold={0}
-          id="swich-color-id-1"
+          id="switch-color-id-1"
         />
-        <rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-1)" />
+        <rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-1)" />
       </LineChart>
 
       <LineChart
         xAxis={[{ data: xData, scaleType: 'point' }]}
-        yAxis={[{ min: -3000, max: 4000 }]}
+        yAxis={[{ min: -3000, max: 4000, width: 40 }]}
         series={[{ data, showMark: false, area: true }]}
         height={200}
-        margin={{ top: 20, bottom: 30, left: 75 }}
+        margin={{ bottom: 0 }}
         sx={{
           [`& .${areaElementClasses.root}`]: {
-            fill: 'url(#swich-color-id-2)',
+            fill: 'url(#switch-color-id-2)',
             filter: 'none', // Remove the default filter.
           },
         }}
       >
-        <ColorPalette id="swich-color-id-2" />
+        <ColorPalette id="switch-color-id-2" />
 
-        <rect x={0} y={0} width={5} height="100%" fill="url(#swich-color-id-2)" />
+        <rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-2)" />
       </LineChart>
     </Stack>
   );

docs/data/charts/axis/AxisCustomizationNoSnap.js

@@ -1,3 +1,4 @@
+// @ts-check
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
@@ -28,7 +29,10 @@ export default function AxisCustomizationNoSnap() {
         { propName: 'label', knob: 'input', defaultValue: 'my axis' },
         { propName: 'tickSize', knob: 'number', defaultValue: 6 },
       ]}
-      renderDemo={(props) => (
+      renderDemo={(
+        /** @type {{ disableLine: boolean; disableTicks: boolean; label: string; tickSize: number; }} */
+        props,
+      ) => (
         <Box sx={{ width: '100%', maxWidth: 400 }}>
           <ScatterChart
             series={[
@@ -38,35 +42,32 @@ export default function AxisCustomizationNoSnap() {
                 data,
               },
             ]}
-            leftAxis={null}
-            bottomAxis={{
-              ...defaultXAxis,
-              ...props,
-            }}
+            yAxis={[{ position: 'none' }]}
+            xAxis={[
+              {
+                ...defaultXAxis,
+                ...props,
+              },
+            ]}
             height={300}
-            margin={{ top: 10, left: 20, right: 20 }}
           />
         </Box>
       )}
-      getCode={({ props }) =>
-        [
-          `import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
-          '',
-          `<ScatterChart`,
-          '  {/** ... */}',
-          `  bottomAxis={{`,
-          ...Object.keys(props)
-            .filter((prop) => props[prop] !== defaultXAxis[prop])
-            .map(
-              (prop) =>
-                `    ${prop}: ${
-                  typeof props[prop] === 'string' ? `"${props[prop]}"` : props[prop]
-                },`,
-            ),
-          '  }}',
-          '/>',
-        ].join('\n')
-      }
+      getCode={(
+        /** @type {{props: { disableLine: boolean; disableTicks: boolean; label: string; tickSize: number; }}} */
+        { props },
+      ) => `import { ScatterChart } from '@mui/x-charts/ScatterChart';
+
+<ScatterChart
+  // ...
+  xAxis={{
+    disableLine: ${props.disableLine},
+    disableTicks: ${props.disableTicks},
+    label: "${props.label}",
+    tickSize: ${props.tickSize},
+  }}
+/>
+`}
     />
   );
 }

docs/data/charts/axis/AxisTextCustomizationNoSnap.js

@@ -1,3 +1,4 @@
+// @ts-check
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
@@ -23,7 +24,10 @@ export default function AxisTextCustomizationNoSnap() {
         { propName: 'fontSize', knob: 'number', defaultValue: 12 },
         { propName: 'labelFontSize', knob: 'number', defaultValue: 14 },
       ]}
-      renderDemo={(props) => (
+      renderDemo={(
+        /** @type {{ labelFontSize: number; angle: number; textAnchor: 'start'| 'middle'| 'end'; fontSize: number; }} */
+        props,
+      ) => (
         <Box sx={{ width: '100%', maxWidth: 400 }}>
           <BarChart
             dataset={dataset}
@@ -32,11 +36,10 @@ export default function AxisTextCustomizationNoSnap() {
                 scaleType: 'band',
                 dataKey: 'month',
                 label: 'months',
+                height: 40,
                 labelStyle: {
                   fontSize: props.labelFontSize,
-                  transform: `translateY(${
-                    5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
-                  }px)`,
+                  transform: `translateY(10px)`,
                 },
                 tickLabelStyle: {
                   angle: props.angle,
@@ -51,33 +54,31 @@ export default function AxisTextCustomizationNoSnap() {
               { dataKey: 'newYork', label: 'New York', valueFormatter },
               { dataKey: 'seoul', label: 'Seoul', valueFormatter },
             ]}
+            margin={{ bottom: 30 }}
             {...chartSetting}
           />
         </Box>
       )}
-      getCode={({ props }) =>
-        [
-          `import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
-          '',
-          `<ScatterChart`,
-          '  {/** ... */}',
-          `  bottomAxis={{`,
-          `    labelStyle: {`,
-          `      fontSize: ${props.labelFontSize},`,
-          `      transform: \`translateY(\${
-            // Hack that should be added in the lib latter.
-            5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
-          }px)\``,
-          `    },`,
-          `    tickLabelStyle: {`,
-          `      angle: ${props.angle},`,
-          `      textAnchor: '${props.textAnchor}',`,
-          `      fontSize: ${props.fontSize},`,
-          `    },`,
-          '  }}',
-          '/>',
-        ].join('\n')
-      }
+      getCode={(
+        /** @type {{props: { labelFontSize: number; angle: number; textAnchor: 'start'| 'middle'| 'end'; fontSize: number; }}} */
+        { props },
+      ) => `import { BarChart } from '@mui/x-charts/BarChart';
+
+<ScatterChart
+  // ...
+  xAxis={[
+    {
+      labelStyle: {
+        fontSize: ${props.labelFontSize},
+      },
+      tickLabelStyle: {
+        angle: ${props.angle},
+        textAnchor: '${props.textAnchor}',
+        fontSize: ${props.fontSize},
+      },
+    },
+  ]}
+/>`}
     />
   );
 }

docs/data/charts/axis/AxisWithComposition.js

@@ -19,7 +19,10 @@ export default function AxisWithComposition() {
             label: 'Quarters',
           },
         ]}
-        yAxis={[{ id: 'money' }, { id: 'quantities' }]}
+        yAxis={[
+          { id: 'money', position: 'right', width: 40 },
+          { id: 'quantities', position: 'left', width: 40 },
+        ]}
         series={[
           {
             type: 'line',
@@ -41,13 +44,13 @@ export default function AxisWithComposition() {
           },
         ]}
         height={400}
-        margin={{ left: 70, right: 70 }}
+        margin={{ left: 25, right: 25 }}
         sx={{
           [`.${axisClasses.left} .${axisClasses.label}`]: {
             transform: 'translate(-25px, 0)',
           },
           [`.${axisClasses.right} .${axisClasses.label}`]: {
-            transform: 'translate(30px, 0)',
+            transform: 'translate(25px, 0)',
           },
         }}
       >
@@ -59,7 +62,7 @@ export default function AxisWithComposition() {
           labelStyle={{ fontSize: 18 }}
         />
         <ChartsYAxis axisId="quantities" label="# units sold" />
-        <ChartsYAxis axisId="money" position="right" label="revenue" />
+        <ChartsYAxis axisId="money" label="revenue" />
       </ChartContainer>
     </Box>
   );