Skip to content

🚀 Influence MUI X's 2025 roadmap! Participate in the latest Developer Survey

Charts - Export

Charts can be printed and exported as PDF.

Export is available on the Pro versions of the charts: <LineChartPro />, <BarChartPro />, <ScatterChartPro />.

Print/Export as PDF

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.

Series A
Series B

<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>

<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>

Press Enter to start editing

Export as image

The apiRef prop also exposes a exportAsImage() method to export the chart as an image.

Dependency

For exportAsImage() to work, you need to add rasterizehtml as a dependency in your project.

npm install rasterizehtml

Usage

The function accepts an options object with the type property, which specifies the image format. The available formats are:

image/png and image/jpeg, which are supported across all supported platforms;
image/webp which is only supported in some browsers.

If the format is not supported by the browser, exportAsImage() falls back to image/png.

Additionally, for lossy formats such as image/jpeg and image/webp, the options object also accepts the quality property, which is a number between 0 and 1. The default value is 0.9.

Series A
Series B

Image Format

image/pngimage/jpegimage/webp

Quality

Only applicable to lossy formats.

<LineChartPro
  apiRef={apiRef}
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    { data: [4, 9, 1, 4, 9, 6], label: 'Series A' },
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
      area: true,
      label: 'Series B',
    },
  ]}
  height={300}
  grid={{ vertical: true, horizontal: true }}
/>
<ExportParamsSelector apiRef={apiRef} />

<LineChartPro
  apiRef={apiRef}
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    { data: [4, 9, 1, 4, 9, 6], label: 'Series A' },
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
      area: true,
      label: 'Series B',
    },
  ]}
  height={300}
  grid={{ vertical: true, horizontal: true }}
/>
<ExportParamsSelector apiRef={apiRef} />

Press Enter to start editing

Composition

As detailed in the Composition section, charts can alternatively be composed of more specific components to create custom visualizations.

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.

Bar
Line

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.