[charts] Export charts as SVG by sai6855 · Pull Request #22661 · mui/mui-x

sai6855 · 2026-06-02T11:49:15Z

Preview: https://deploy-preview-22661--material-ui-x.netlify.app/x/react-charts/export/#default-toolbar
https://deploy-preview-22661--material-ui-x.netlify.app/x/react-charts/export/#export-as-svg

Main file to be reviewed: https://github.com/mui/mui-x/pull/22661/changes#diff-6b2ed30a4ec02b18484bb8960682846ccf5aa941a336fdec6880e6e986037b64

code-infra-dashboard · 2026-06-02T12:20:38Z

Deploy preview

docs/data/charts/export/export.md

Bundle size

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+33B^(+0.01%)	🔺+9B^(+0.01%)
@mui/x-charts-pro	🔺+4.53KB^(+0.89%)	🔺+1.27KB^(+0.83%)
@mui/x-charts-premium	🔺+4.53KB^(+0.73%)	🔺+1.3KB^(+0.70%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-license	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

Copilot

Pull request overview

Adds first-class SVG export support to MUI X Charts Pro/Premium, including a new toolbar trigger, API surface (exportAsSvg), localization key, and documentation/demo updates.

Changes:

Introduces exportAsSvg() in the Pro export plugin, including SVG serialization and canvas-layer raster embedding.
Adds a new ChartsToolbarSvgExportTrigger and integrates it into ChartsToolbarPro’s export menu + locale text.
Adds docs/demo content and an API reference page for the new toolbar trigger.

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/x-charts/src/locales/utils/chartsLocaleTextApi.ts	Adds new locale key for SVG export menu item text.
packages/x-charts/src/locales/enUS.ts	Provides English string for the new SVG export menu item.
packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/SankeyChart/SankeyChart.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/RadarChartPro/RadarChartPro.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/PieChartPro/PieChartPro.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/internals/plugins/useChartProExport/useChartProExport.types.ts	Adds `ChartSvgExportOptions` and `exportAsSvg` to the public export API types.
packages/x-charts-pro/src/internals/plugins/useChartProExport/useChartProExport.ts	Wires `exportAsSvg` into the export plugin public API and instance.
packages/x-charts-pro/src/internals/plugins/useChartProExport/exportSvg.ts	Implements SVG export composition (SVG layers + rasterized canvas layers + legend serialization).
packages/x-charts-pro/src/internals/plugins/useChartProExport/exportImage.ts	Refactors download triggering to shared helper.
packages/x-charts-pro/src/internals/plugins/useChartProExport/common.ts	Introduces shared `triggerDownload` helper for export flows.
packages/x-charts-pro/src/Heatmap/Heatmap.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/FunnelChart/FunnelChart.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-pro/src/ChartsToolbarPro/index.ts	Re-exports the new SVG export trigger component.
packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarSvgExportTrigger.tsx	Adds a new toolbar trigger component to call `exportAsSvg`.
packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPro.tsx	Adds SVG export entry to the export menu and exposes `svgExportOptions`.
packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-premium/src/ScatterChartPremium/ScatterChartPremium.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-premium/src/RadialLineChart/RadialLineChart.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-premium/src/RadialBarChart/RadialBarChart.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-premium/src/HeatmapPremium/HeatmapPremium.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-premium/src/CandlestickChart/CandlestickChart.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
packages/x-charts-premium/src/BarChartPremium/BarChartPremium.tsx	Extends `apiRef` propTypes to include `exportAsSvg`.
docs/translations/api-docs/charts/charts-toolbar-svg-export-trigger/charts-toolbar-svg-export-trigger.json	Adds translation stub for the new API page.
docs/pages/x/api/charts/charts-toolbar-svg-export-trigger.json	Adds generated API docs metadata for the new component.
docs/pages/x/api/charts/charts-toolbar-svg-export-trigger.js	Adds the new API docs page entry point.
docs/data/chartsApiPages.ts	Registers the new API page in the charts API pages list.
docs/data/charts/export/ExportChartAsSvg.tsx	Adds TS demo showcasing `exportAsSvg`.
docs/data/charts/export/ExportChartAsSvg.js	Adds JS demo showcasing `exportAsSvg`.
docs/data/charts/export/export.md	Documents SVG export and adds the new demo section.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

sai6855 · 2026-06-05T10:49:54Z

+  const blob = new Blob([svgString], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  triggerDownload(url, fileName || `${document.title}.svg`);
+  URL.revokeObjectURL(url);


fixed here 5c400bb

…port-svg

JCQuintas · 2026-06-05T13:32:37Z

+function buildLegendGroup(
+  chartRoot: Element,
+  doc: Document,
+  originLeft: number,
+  originTop: number,
+): SVGElement | null {


Nice, we need some padding at the top though.

We might want to move this entire svg creation to an iframe too, so we can force the styling to be light mode, since currently running this in dark mode produces bad output.

See the label text is different from the chart text

Moved to iframe and forcing exporting to light mode, text and legend are rendering correctly now

I tried the export in dark mode from https://deploy-preview-22661--material-ui-x.netlify.app/x/react-charts/export/#default-toolbar

And legend text are white

Seems to be working for me

alexfauquette · 2026-06-08T09:07:58Z

+For image and PDF export, `onBeforeExport` receives the iframe the chart is rendered into before the export process starts.
+SVG export serializes an SVG document, so its `onBeforeExport` receives the `<svg>` element to be exported instead.


WOuld be easier if the onBeforeExport got the same iframe input, and add a warning in the SVG export section to say

:::warning
The SVG export is a serialization of the outer svg component.

If you CSS modification or add elements outside, they will have no impact ont the generated svg file
:::

Having same onBeforeExport signature should simplify sharing customization across different exports

alexfauquette · 2026-06-08T09:09:37Z

+:::info
+The chart is always exported in light mode, regardless of the color scheme of the page it is rendered in.
+:::
+


This is a general information impacting also PNG and PDF. Might be better to put it higher in the docs. And maybe add an issue to up-vote for dark mode support

alexfauquette · 2026-06-08T09:13:46Z

  toolbarExportImage: (mimeType) => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`,
+  toolbarExportSvg: 'Export as SVG',


WHat about add image/svg+xml mimeType to avoid introducing toolbarExportSvg

alexfauquette · 2026-06-08T09:25:25Z

+    // Span the union of the plot and legend boxes; their top-left is the export origin.
+    const legendClone = chartClone.querySelector(`.${legendClasses.root}`);
+    const rects = [containerClone.getBoundingClientRect()];
+    if (legendClone) {
+      rects.push(legendClone.getBoundingClientRect());
+    }
+    const topPadding = legendClone ? LEGEND_TOP_PADDING : 0;
+    const originLeft = Math.min(...rects.map((rect) => rect.left));
+    const originTop = Math.min(...rects.map((rect) => rect.top)) - topPadding;
+    const width = Math.max(...rects.map((rect) => rect.right)) - originLeft;
+    const height = Math.max(...rects.map((rect) => rect.bottom)) - originTop;
+
+    const outSvg = exportDoc.createElementNS(SVG_NS, 'svg');
+    outSvg.setAttribute('xmlns', SVG_NS);
+    outSvg.setAttribute('xmlns:xlink', XLINK_NS);
+    outSvg.setAttribute('width', `${width}`);
+    outSvg.setAttribute('height', `${height}`);
+    outSvg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    outSvg.setAttribute('data-mui-color-scheme', 'light');
+


That's fairly limited. It assumes users only use our default legend with appropriate classes

Did you consider using the satori library to map https://github.com/vercel/satori ?

Maybe satori is not well suited because it's designer to run in node runtime. Here we are in the browser so we can leverage it to measure text position and style

Text will need an adaptation: color in HTML becomes fill in SVG

Instead of limiting ourself to the legend.root could we search for

all nodes with text content -> reproduce them with a <text/>

all nodes with border/backgroundColor -> reproduce them with a <rect />

all nodes with text content -> reproduce them with a
all nodes with border/backgroundColor -> reproduce them with a

It's an interesting approach, but should we also pass the classnames through?

I think the issue with trying to be too smart about it is that we can't really cover all ends unless we render exactly what the user provides with the classes they provide 😢

We can try though 🤷

I think the issue with trying to be too smart about it is that we can't really cover all ends unless we render exactly what the user provides with the classes they provide 😢

Yes, especially with features in HTML/CSS not present in the SVG. For example: the text wrapping 🫣

sai6855 added 3 commits June 2, 2026 13:52

boiler plate code

c98d7cb

barebones export

537aa17

add styles

5f3ab5b

sai6855 changed the title ~~Export svg~~ [charts] Export charts as SVG Jun 2, 2026

fix type

4566a25

sai6855 added type: new feature Expand the scope of the product to solve a new problem. plan: Pro Impact at least one Pro user. plan: Premium Impact at least one Premium user. scope: charts Changes related to the charts. labels Jun 2, 2026

sai6855 and others added 8 commits June 5, 2026 13:41

clone legend

eb73b78

clone legend

e1c40bc

clone legend

3c3fe5e

clone legend

05cd9ad

fix

ac20f50

fix

1125f98

add docs

0195010

docs:api

7fa89d7

sai6855 marked this pull request as ready for review June 5, 2026 10:39

sai6855 requested review from JCQuintas and alexfauquette as code owners June 5, 2026 10:39

Copilot AI review requested due to automatic review settings June 5, 2026 10:39

Copilot started reviewing on behalf of sai6855 June 5, 2026 10:39 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

sai6855 and others added 6 commits June 5, 2026 16:19

fix chart name

5c400bb

Merge branch 'export-svg' of https://github.com/sai6855/mui-x into ex…

cf737c2

…port-svg

fix export

7901555

Merge branch 'export-svg' of https://github.com/sai6855/mui-x into ex…

bfe4314

…port-svg

fix docs

e51ee40

Merge branch 'export-svg' of https://github.com/sai6855/mui-x into ex…

790ab3d

…port-svg

sai6855 and others added 5 commits June 5, 2026 11:08

fix l10n

1a2029c

Merge branch 'master' into export-svg

2ac17bd

export svg export

13090ff

Merge branch 'export-svg' of https://github.com/sai6855/mui-x into ex…

f66f361

…port-svg

export

f95e0d6

JCQuintas reviewed Jun 5, 2026

View reviewed changes

sai6855 and others added 4 commits June 8, 2026 12:40

fix docs

473d337

fix logic

28e03b9

Merge branch 'master' into export-svg

d6685c3

svg export doc

5eb4205

alexfauquette reviewed Jun 8, 2026

View reviewed changes

fix deployment

e19f2cf

alexfauquette reviewed Jun 8, 2026

View reviewed changes

Merge branch 'master' into export-svg

03d83cc

		For image and PDF export, `onBeforeExport` receives the iframe the chart is rendered into before the export process starts.
		SVG export serializes an SVG document, so its `onBeforeExport` receives the `<svg>` element to be exported instead.

		toolbarExportImage: (mimeType) => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`,
		toolbarExportSvg: 'Export as SVG',

Uh oh!

Conversation

sai6855 commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

code-infra-dashboard Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sai6855 Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sai6855 commented Jun 2, 2026 •

edited

Loading

code-infra-dashboard Bot commented Jun 2, 2026 •

edited

Loading

sai6855 Jun 8, 2026 •

edited

Loading