@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 will need to install as well.

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

Documentation

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

Changelog

7.12.0

Aug 1, 2024

💵 Our commercial offering is evolving

The Pro plan is receiving two new packages:

• @mui/x-tree-view-pro (available today!)
• @mui/x-charts-pro (available in the coming weeks)

As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.

This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the Upcoming changes to MUI X pricing in 2024 blog post.

Highlights

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

• 🎁 Introduce item reordering using drag and drop on the <RichTreeViewPro /> component

  <img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />

• 📦 Support CommonJS bundle out of the box on @mui/x-charts by adding vendored D3 dependencies.

  • This modifies how the package imports D3.js. It will impact you if you use d3 packages installed by @mui/x-charts and don't have them in your package.json. You shouldn't be affected otherwise.

  • For more context, the initial issue is caused by D3 only exporting ESM.

    

  • The solution up until now was to export charts with only ESM. But some frameworks are confused by this configuration.

    

  • So in order to fix this, we are providing a CJS version of D3.

    

• 🌍 Improve Turkish (tr-TR) locale on the Data Grid

• 🌍 Improve Finnish (fi-FI) locale on the Date and Time Pickers

• 🐞 Bugfixes

• 📚 Documentation improvements

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid