[charts-pro] Add export menu to charts toolbar #18210
Conversation
Localization writing tips ✍️Seems you are updating localization 🌍 files. Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️
Deploy preview: https://deploy-preview-18210--material-ui-x.netlify.app/ Updated pages: Bundle size reportTotal Size Change: 🔺+47.4KB(+0.38%) - Total Gzip Change: 🔺+16.7KB(+0.43%) Show details for 100 more bundles (22 more not shown)@mui/x-charts-pro/Heatmap parsed: 🔺+5.42KB(+2.83%) gzip: 🔺+1.91KB(+3.02%) |
bernardobelchior
force-pushed
the
charts-toolbar-export-menu
branch
2 times, most recently
from
6d3f13a to
c24fe0b
Compare
| 'bottom-end': 'top right', | ||
| }; | ||
|
|
||
| export function BasePopper(props: ChartBasePopperProps) { |
There was a problem hiding this comment.
Basically a copy of Data Grid's BasePopper (source)
| import ListItemText from '@mui/material/ListItemText'; | ||
| import { ChartBaseMenuItemProps } from '../../slots/chartBaseSlotProps'; | ||
|
|
||
| export function BaseMenuItem(props: ChartBaseMenuItemProps) { |
| height: '50%', | ||
| })); | ||
|
|
||
| const ChartsToolbarDivider = React.forwardRef<HTMLHRElement, ChartsToolbarDividerProps>( |
There was a problem hiding this comment.
A copy of Data Grid's GridToolbarDivider (source)
| children: React.ReactNode; | ||
| } | ||
|
|
||
| function ChartsMenu(props: ChartsMenuProps) { |
bernardobelchior
changed the title
bernardobelchior
requested review from
JCQuintas and
alexfauquette
and removed request for
alexfauquette
bernardobelchior
added
the
type: new feature
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
bernardobelchior
force-pushed
the
charts-toolbar-export-menu
branch
from
09fee1b to
5d235f5
Compare
github-actions
bot
added
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
bernardobelchior
force-pushed
the
charts-toolbar-export-menu
branch
from
8ce65bc to
26100a2
Compare
docs/data/charts/export/export.md
Outdated
| Charts can be exported using the browser's native print dialog or as an image. | ||
|
|
||
| {{"demo": "PrintChart.js"}} | ||
| To enable this functionality, you need to enable the chart's toolbar by passing the `showToolbar` prop to the chart component. |
There was a problem hiding this comment.
This is not true is it? The export functionality is enabled on the API level, not if the toolbar is shown or not 🤔
JCQuintas
left a comment
JCQuintas
left a comment
There was a problem hiding this comment.
Left some copy improvements, everything else seems good
| To enable this functionality, you need to enable the chart's toolbar by passing the `showToolbar` prop to the chart component. | ||
|
|
||
| ## Export as image | ||
| The toolbar then renders a button that opens a menu with the export options. |
There was a problem hiding this comment.
The demo is self explenatory on the result
| The toolbar then renders a button that opens a menu with the export options. |
|
Maybe we could rewrite the Customization demo to use the "code preview"? So the users understand what is happening in the code for each option. |
Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>
6 participants
Fixes #18185.
Adds an export menu to the charts toolbar. It is accessible and can be configured to hide/show options as well as export multiple image formats. Like the other PRs related to the toolbar, most of the code is a copy of the Data Grid's. I've left comments to a link to the original one.
Default toolbar:
Screen.Recording.2025-06-04.at.16.50.19.mov
Toolbar made through composition:
Screen.Recording.2025-06-04.at.16.50.57.mov