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

Ghouse1991 commented 9 months ago

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

https://github.com/recharts/recharts/issues/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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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

mui / mui-x