@mui/x-charts

MUI X Charts

This package is the community edition of the chart components. It's part of MUI X, an open-core extension of MUI Core, with advanced components.

Installation

Install the package in your project directory with:

npm install @mui/x-charts

This component has the following peer dependencies that you need to install as well.

"peerDependencies": {
  "@mui/material": "^5.15.14 || ^6.0.0",
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

Documentation

Visit https://mui.com/x/react-charts/ to view the full documentation.

Changelog

v8.0.0-alpha.2

Nov 29, 2024

We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:

• 👨🏽‍💻 Improve resize performance on the Data Gird.
• <ChartDataProvider /> and <ChartsSurface /> components are now fully divided — Learn more.
• Users can create their own HTML components using chart data — Learn more.
• 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
• 🌍 Improve Dutch locale on the Date and Time Pickers components.
• 🐞 Bugfixes
• 📚 Documentation improvements

Special thanks go out to the community contributors who have helped make this release possible: @dloeda, @headironc, @jedesroches, @k-rajat19, @lauri865, @mathzdev, @nphmuller, @zinoroman. Following are all team members who have contributed to this release: @arminmeh, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @oliviertassinari.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

Breaking changes

• The <GridOverlays /> component is not exported anymore.
• The indeterminateCheckboxAction prop has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.
• The apiRef.current.resize() method was removed.
• The default value of the rowSelectionPropagation prop has been changed to { parents: true, descendants: true } which means that the selection will be propagated to the parents and descendants by default. To revert to the previous behavior, pass rowSelectionPropagation as { parents: false, descendants: false }.
• If estimatedRowCount is used, the text provided to the Table Pagination component from the Material UI library is updated and requires additional translations. Check the example at the end of Index-based pagination section.