Skip to content

[charts-pro] Export charts as image #17353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 16 commits into from
Apr 24, 2025
Merged

[charts-pro] Export charts as image #17353

merged 16 commits into from
Apr 24, 2025

Conversation

bernardobelchior
Copy link
Member

@bernardobelchior bernardobelchior commented Apr 14, 2025 •
edited
Loading

Part of #11746.

Export charts as image. PNG is supported across all browsers, JPEG and WEBP depend on the browser, but most major browsers support them

Benchmark

Changelog

Add API to export a chart as an image: apiRef.exportAsImage.

Preview: https://deploy-preview-17353--material-ui-x.netlify.app/x/react-charts/export/

@bernardobelchior bernardobelchior added type: new feature Introduces a new piece of functionality or capability. scope: charts Changes or issues related to the charts product labels Apr 14, 2025
@mui-bot
Copy link

mui-bot commented Apr 14, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-17353--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against ea7328f

@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Apr 14, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #17353 will not alter performance

Comparing bernardobelchior:charts-export-image (ea7328f) with master (e9621d6)

Summary

✅ 8 untouched benchmarks

@bernardobelchior bernardobelchior force-pushed the charts-export-image branch 2 times, most recently from 42bb1c0 to 826c311 Compare April 17, 2025 15:42
@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 21, 2025
@bernardobelchior bernardobelchior mentioned this pull request Apr 23, 2025
Merged
@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Apr 23, 2025
@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@bernardobelchior
Add basic export functionality
d57f9fd 
Add options

Add space

Optional options

Export `ChartApi` and `ChartProApi`

Add print preview test

Revert changes to tests

Remove `@media not print`

Rename to `exportAsPrint`

Document export composition

Generate files

Update docs

Update export composition example

Add tests

Improve print preview screenshot

Improve data grid screenshot

Increase width slightly

Fix print test

Address feedback

Revert changes to tests
@bernardobelchior
[charts] Export charts as image
ee7d7dc
@bernardobelchior
Fix types
f6fa42c
@bernardobelchior
Add test
bf35743
@bernardobelchior
Update tests
da96b67
@bernardobelchior
Increase timeout
7deb126
@bernardobelchior
Fix get by role
4ae4758
@bernardobelchior
Move to optional dependencies.
ef6ecec
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 23, 2025
@bernardobelchior bernardobelchior marked this pull request as ready for review April 23, 2025 10:05
alexfauquette
alexfauquette reviewed Apr 23, 2025
View reviewed changes
Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing looks much easier than PDF ;)

docs/data/charts/export/ExportChartAsImage.tsx
}) {
const [type, setType] = React.useState('image/png');
const [rawQuality, setRawQuality] = React.useState('0.9');
const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality)));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A slider woudl solve the need for such a validation :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't a slider a bit harder to use when selecting a specific value? For floating point numbers we would have a step of 0.01, which wouldn't be great when selecting a number, right?

I suppose sliders work better for integers.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose sliders work better for integers.

If you consider this as a percentage, it becomes an integer equivalent to a step of 0.01 ;)
But the texfield is ok too 👍

alexfauquette
alexfauquette approved these changes Apr 24, 2025
View reviewed changes
Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just few feedback on the docs.

The external package is effectively downloaded only on the first click.
I'm surprised by the number of font downloads compared to the one downloaded in the PDF print. But that seems to come from the library side not sure we can reduce it

@bernardobelchior bernardobelchior changed the title [charts] Export charts as image [charts-pro] Export charts as image Apr 24, 2025
@bernardobelchior bernardobelchior merged commit cb55e58 into mui:master Apr 24, 2025
22 checks passed
@oliviertassinari oliviertassinari added the plan: Pro Impact at least one Pro user label Apr 24, 2025
@oliviertassinari oliviertassinari mentioned this pull request Apr 24, 2025
Merged
oliviertassinari
oliviertassinari reviewed Apr 24, 2025
View reviewed changes
packages/x-charts-pro/src/internals/plugins/useChartProExport/common.ts
return iframeEl;
}

export function loadStyleSheets(document: Document, element: HTMLElement | SVGElement) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks close to the data grid print logic, maybe something to share at one point.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's a direct copy. I'll look into how we can share this.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here it is: #17548

@bernardobelchior bernardobelchior deleted the charts-export-image branch April 25, 2025 08:24
@bernardobelchior bernardobelchior mentioned this pull request May 22, 2025
Closed
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

@alexfauquette alexfauquette alexfauquette approved these changes

@JCQuintas JCQuintas Awaiting requested review from JCQuintas JCQuintas is a code owner

Assignees
No one assigned
Labels
plan: Pro Impact at least one Pro user scope: charts Changes or issues related to the charts product type: new feature Introduces a new piece of functionality or capability.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@bernardobelchior @mui-bot @oliviertassinari @alexfauquette