[charts] Add charts toolbar with zoom options

[bernardobelchior]

Add charts toolbar with zoom options. Part of #17557.

Designs.

Screen.Recording.2025-04-30.at.10.27.52.mov

This PR closely follows the Data Grid's toolbar implementation. This PR does not yet implement customization of the toolbar, which will be done in subsequent PRs, along with other improvements such as defining the toolbar's position.

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

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: ✔️

• Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

  [l10n] Improve Swedish (sv-SE) locale
  [l10n] Add Danish (da-DK) locale

• Update the documentation of supported locales by running pnpm l10n
• Clean files with pnpm prettier.

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

Updated pages:

• docs/data/charts/toolbar/toolbar.md

Generated by 🚫 dangerJS against cc3d855

[codspeed-hq]

CodSpeed Performance Report

Merging #17615 will not alter performance

_{Comparing bernardobelchior:charts-zoom-toolbar (cc3d855) with master (e567c6e)}

Summary

✅ 8 untouched benchmarks

[github-actions]

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

[JCQuintas]

Works nicely. I've added some comments on things I didn't understand or where the API could be improved for discussion

[alexfauquette]

Should this be in the pro package?

Or something like

export interface ChartsIconSlotsExtension {}
export interface ChartsIconSlots extends ChartsIconSlotsExtension { }

To allow doing

declare module '@mui/x-charts' {
  interface ChartsIconSlotsExtension {
	  /**
	   * Icon displayed on the toolbar's zoom in button.
	   * @default ChartsZoomInIcon
	   */
	  zoomInIcon: React.ComponentType<IconProps>;
	  /**
	   * Icon displayed on the toolbar's zoom out button.
	   * @default ChartsZoomOutIcon
	   */
	  zoomOutIcon: React.ComponentType<IconProps>;
  }
}

A bit similar to #14063

[bernardobelchior]

Done 👍

[bernardobelchior]

I did it, but I'm now reconsidering. We are still exporting the pro icons from the community package, so there isn't a big benefit in extending the types, is there?

Another option would be for the pro package to export a ChartsSlotsPro type which would extend from ChartsSlots. That way we could move the pro-only components to that package instead of increasing the bundle size of the community version.

If you think that's a good idea, I could do it in a follow-up PR, what do you think?

[bernardobelchior]

Moved the pro slots to the pro package

[github-actions]

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

[JCQuintas]

Small nitpick, but otherwise looking good

[JCQuintas]

I find it a bit weird we export materialSlots, as it is technically not a slot. 🤔

[bernardobelchior]

Why do you say it isn't a slot?

At the moment, it might not be, be it'll be in a follow-up PR.

We'll use it like this:

 <ScatterChartPro
  {...params}
  xAxis={[{ zoom: true }]}
  yAxis={[{ zoom: true }]}
  showToolbar
  slots={{ baseIconButton: CustomIconButton }}
/>

[JCQuintas]

My understanding is that the slot is the part that can be overridden. So the slot is aptly named a "slot", where something else (a component in this case) fits into.

This means the items here are not slots, they are components that are used in the slots by default. 😆

[bernardobelchior]

Do you have a suggestion for the name? I can change it in a follow-up PR.

[JCQuintas]

If the goal is to have a single object import, I would go with materialComponents maybe?

But my preferred way would be

export { IconButton } from '@mui/material/IconButton'

since the object way probably doesn't treeshake properly

[bernardobelchior]

What do you think of defaultSlotsMaterial?

But my preferred way would be

What do you mean? I thought you meant the constant. Didn't get what you meant 😅

[JCQuintas]

defaultSlotsMaterial can work.

What do you mean? I thought you meant the constant. Didn't get what you meant 😅

Yeah, IconButton is a component. My secondary point with that comment is that we are exporting an object here which is a list of components, which probably breaks treeshaking, since whenever any of the components is used it will load all of them

[bernardobelchior]

Ok, I'll use that 👍

My secondary point with that comment is that we are exporting an object here which is a list of components, which probably breaks treeshaking, since whenever any of the components is used it will load all of them

It'll break tree-shaking nevertheless because we need to select the component in runtime. We'll never be able to remove the code from those components from the bundle because if a slot goes missing in runtime we'll need to use the default from MUI.

That's one of the conclusions I arrived at here, but decided to keep the same API as the Data Grid.

If we want to fix the tree-shaking issue we need to find another way to register the default slots.

[bernardobelchior]

PR: #17710