[charts] Export/Save as PNG / JPG / SVG / PDF

[Ghouse1991]

Right now I'm not able to see any export/save option available currently in mui x charts (e.g., bar/pie charts) on right click/ any other way. Is that option already exists in latest version or any plan to introduce that in future

Expected behavior

Export/Save option to be available in x charts

Search keywords: export option mui x charts

User requests

• PDF
  • https://stackoverflow.com/questions/78749372/how-to-export-react-mui-charts-as-pdf-from-the-server-side

Benchmarks

• Export Chart recharts/recharts#1321. No built-in support. Stack Overflow example on how to use browser API to export SVG
• https://www.chartjs.org/docs/latest/developers/api.html#tobase64image-type-quality support export to PNG/JPEG
• https://plotly.com/javascript/static-image-export/ support export to PNG/JPG. SVF/PDF are supported too but commercial.
• https://www.highcharts.com/docs/export-module/client-side-export support export to PNG/JPEG/SVG/PDF

• https://www.telerik.com/kendo-react-ui/components/charts/chart/export-options/ support export to SVG/PDF
• https://og-playground.vercel.app/

[alexfauquette]

Hi, thanks for your interest. Yes it's planned to be done as a pro feature.

The feature is still not well defined do you have some particular needs in mind?

[Ghouse1991]

Thanks for your response @alexfauquette . What I'm really looking for is to have an export option on somewhere around the chart and the exported file should have series of data that we're passing to chart in categorized manner. and the snap of the chart would be really great.

[ShreyasJejurkar]

The feature is still not well defined do you have some particular needs in mind?

With MUI X charts, users can see visual representations of data in various formats and diagrams. But let's say the user wants to use that graphic or diagram for an email attachment, in that case, there is no easier/built-in way to export that diagram as a PNG, or JPEG image so that the user can use that to their respective needs.

So it will be good to have a feature where we can show a downloadable icon when user hover over the diagram so that they can download that diagram to their machine.

[SunPj]

Here is my solution https://gist.github.com/SunPj/14fe4f10db43be2d84751f5595d48246
Not ideal but still working

Demo (download button is far on the right) https://f29qcl.csb.app/

[Ghouse1991]

thanks @SunPj for your effort. but I'm getting some error "Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules" - I'm opening in new window only

[SunPj]

@Ghouse1991 That's because of strict CORS rules of codesandbox, the demo is shown on one domain and the scripts are loaded from another domain. The best if you just clone and try it yourself.

[Ghouse1991]

Sure. I'll give a try on that. Thanks