[charts][docs] Improve Charts export docs

docs/data/charts/export/ExportChartAsImage.js

@@ -15,13 +15,7 @@ function ExportParamsSelector({ apiRef }) {
   const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality)));
 
   return (
-    <Stack
-      direction="row"
-      justifyContent="space-between"
-      flexWrap="wrap"
-      gap={2}
-      sx={{ width: '100%' }}
-    >
+    <Stack justifyContent="space-between" gap={2} sx={{ width: '100%' }}>
       <FormControl fullWidth>
         <FormLabel id="image-format-radio-buttons-group-label">
           Image Format
@@ -59,12 +53,14 @@ function ExportParamsSelector({ apiRef }) {
           helperText="Only applicable to lossy formats."
         />
       </FormControl>
-      <Button
-        variant="outlined"
-        onClick={() => apiRef.current?.exportAsImage({ type, quality })}
-      >
-        Export Image
-      </Button>
+      <div>
+        <Button
+          onClick={() => apiRef.current.exportAsImage({ type, quality })}
+          variant="contained"
+        >
+          Export Image
+        </Button>
+      </div>
     </Stack>
   );
 }

docs/data/charts/export/ExportChartAsImage.tsx

@@ -20,13 +20,7 @@ function ExportParamsSelector({
   const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality)));
 
   return (
-    <Stack
-      direction="row"
-      justifyContent="space-between"
-      flexWrap="wrap"
-      gap={2}
-      sx={{ width: '100%' }}
-    >
+    <Stack justifyContent="space-between" gap={2} sx={{ width: '100%' }}>
       <FormControl fullWidth>
         <FormLabel id="image-format-radio-buttons-group-label">
           Image Format
@@ -66,12 +60,14 @@ function ExportParamsSelector({
           helperText="Only applicable to lossy formats."
         />
       </FormControl>
-      <Button
-        variant="outlined"
-        onClick={() => apiRef.current?.exportAsImage({ type, quality })}
-      >
-        Export Image
-      </Button>
+      <div>
+        <Button
+          onClick={() => apiRef.current!.exportAsImage({ type, quality })}
+          variant="contained"
+        >
+          Export Image
+        </Button>
+      </div>
     </Stack>
   );
 }

docs/data/charts/export/ExportCompositionNoSnap.js

@@ -28,7 +28,14 @@ export default function ExportCompositionNoSnap() {
   const apiRef = React.useRef(undefined);
 
   return (
-    <Stack width="100%">
+    <Stack width="100%" sx={{ display: 'block' }}>
+      <Button
+        onClick={() => apiRef.current.exportAsPrint()}
+        variant="contained"
+        sx={{ mb: 1 }}
+      >
+        Print
+      </Button>
       <ChartDataProviderPro
         apiRef={apiRef}
         height={300}
@@ -65,8 +72,6 @@ export default function ExportCompositionNoSnap() {
           </ChartsSurface>
         </CustomChartWrapper>
       </ChartDataProviderPro>
-
-      <Button onClick={() => apiRef.current?.exportAsPrint()}>Print</Button>
     </Stack>
   );
 }

docs/data/charts/export/ExportCompositionNoSnap.tsx

@@ -28,7 +28,14 @@ export default function ExportCompositionNoSnap() {
   const apiRef = React.useRef<ChartProApi>(undefined);
 
   return (
-    <Stack width="100%">
+    <Stack width="100%" sx={{ display: 'block' }}>
+      <Button
+        onClick={() => apiRef.current!.exportAsPrint()}
+        variant="contained"
+        sx={{ mb: 1 }}
+      >
+        Print
+      </Button>
       <ChartDataProviderPro
         apiRef={apiRef}
         height={300}
@@ -65,8 +72,6 @@ export default function ExportCompositionNoSnap() {
           </ChartsSurface>
         </CustomChartWrapper>
       </ChartDataProviderPro>
-
-      <Button onClick={() => apiRef.current?.exportAsPrint()}>Print</Button>
     </Stack>
   );
 }

docs/data/charts/export/PrintChart.js

@@ -5,26 +5,30 @@ import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
 
 import { data } from './randomData';
 
+const series = [
+  {
+    label: 'Series A',
+    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
+  },
+  {
+    label: 'Series B',
+    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
+  },
+];
+
 export default function PrintChart() {
   const apiRef = React.useRef(undefined);
 
   return (
-    <Stack width="100%">
-      <ScatterChartPro
-        apiRef={apiRef}
-        height={300}
-        series={[
-          {
-            label: 'Series A',
-            data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
-          },
-          {
-            label: 'Series B',
-            data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
-          },
-        ]}
-      />
-      <Button onClick={() => apiRef.current?.exportAsPrint()}>Print</Button>
+    <Stack width="100%" sx={{ display: 'block' }}>
+      <Button
+        onClick={() => apiRef.current.exportAsPrint()}
+        variant="contained"
+        sx={{ mb: 1 }}
+      >
+        Print
+      </Button>
+      <ScatterChartPro apiRef={apiRef} height={300} series={series} />
     </Stack>
   );
 }

docs/data/charts/export/PrintChart.tsx

@@ -5,26 +5,30 @@ import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
 import { ChartProApi } from '@mui/x-charts-pro/ChartContainerPro';
 import { data } from './randomData';
 
+const series = [
+  {
+    label: 'Series A',
+    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
+  },
+  {
+    label: 'Series B',
+    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
+  },
+];
+
 export default function PrintChart() {
   const apiRef = React.useRef<ChartProApi>(undefined);
 
   return (
-    <Stack width="100%">
-      <ScatterChartPro
-        apiRef={apiRef}
-        height={300}
-        series={[
-          {
-            label: 'Series A',
-            data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
-          },
-          {
-            label: 'Series B',
-            data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
-          },
-        ]}
-      />
-      <Button onClick={() => apiRef.current?.exportAsPrint()}>Print</Button>
+    <Stack width="100%" sx={{ display: 'block' }}>
+      <Button
+        onClick={() => apiRef.current!.exportAsPrint()}
+        variant="contained"
+        sx={{ mb: 1 }}
+      >
+        Print
+      </Button>
+      <ScatterChartPro apiRef={apiRef} height={300} series={series} />
     </Stack>
   );
 }

docs/data/charts/export/PrintChart.tsx.preview

@@ -1,15 +1,8 @@
-<ScatterChartPro
-  apiRef={apiRef}
-  height={300}
-  series={[
-    {
-      label: 'Series A',
-      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
-    },
-    {
-      label: 'Series B',
-      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
-    },
-  ]}
-/>
-<Button onClick={() => apiRef.current?.exportAsPrint()}>Print</Button>
+<Button
+  onClick={() => apiRef.current!.exportAsPrint()}
+  variant="contained"
+  sx={{ mb: 1 }}
+>
+  Print
+</Button>
+<ScatterChartPro apiRef={apiRef} height={300} series={series} />

docs/data/charts/export/export.md

@@ -12,7 +12,7 @@ Export is available on the **Pro**[<span class="plan-pro"></span>](/x/introducti
 
 ## Print/Export as PDF
 
-The `apiRef` prop exposes a `exportAsPrint` method that can be used to open the browser's print dialog.
+The `apiRef` prop exposes a `exportAsPrint()` method that can be used to open the browser's print dialog.
 
 The print dialog allows you to print the chart or save it as a PDF, as well as configuring other settings.
 
@@ -24,7 +24,7 @@ The `apiRef` prop also exposes a `exportAsImage()` method to export the chart as
 
 ### Dependency
 
-For `exportAsImage()` to work, you need to add `rasterizehtml` as a dependency in your project.
+For `exportAsImage()` to work, you need to add the`rasterizehtml` npm dependency in your project.
 
 <codeblock storageKey="package-manager">
 
@@ -63,6 +63,6 @@ As detailed in the [Composition](/x/react-charts/composition/) section, charts c
 When exporting a chart, the `ChartsWrapper` element is considered the root element of the chart, and every descendant is included in the export.
 As such, you need to ensure that the `ChartsWrapper` element is the root element of the chart you want to export.
 
-If you want to use a custom wrapper element, you need to use the `useChartRootRef` hook to set the reference to the chart's root element so that exporting works properly, as exemplified below.
+If you want to use a custom wrapper element, you need to use the `useChartRootRef()` hook to set the reference to the chart's root element so that exporting works properly, as exemplified below.
 
 {{"demo": "ExportCompositionNoSnap.js"}}