Migration from v6 to v7

This guide describes the changes needed to migrate Charts from v6 to v7.

Introduction

This is a reference guide for upgrading @mui/x-charts from v6 to v7. The change between v6 and v7 is mostly here to match the version with other MUI X packages. No big breaking changes are expected.

Start using the new release

In package.json, change the version of the charts package to ^7.0.0.

-"@mui/x-charts": "6.x.x",
+"@mui/x-charts": "^7.0.0",

Update @mui/material package

To have the option of using the latest API from @mui/material, the package peer dependency version has been updated to ^5.15.14. It is a change in minor version only, so it should not cause any breaking changes. Please update your @mui/material package to this or a newer version.

Breaking changes

Since v7 is a major release, it contains changes that affect the public API. These changes were done for consistency, improved stability and to make room for new features.

Drop the legacy bundle

The support for IE 11 has been removed from all MUI X packages. The legacy bundle that used to support old browsers like IE 11 is no longer included.

Drop Webpack 4 support

Dropping old browsers support also means that we no longer transpile some features that are natively supported by modern browsers – like Nullish Coalescing and Optional Chaining.

These features are not supported by Webpack 4, so if you are using Webpack 4, you will need to transpile these features yourself or upgrade to Webpack 5.

Here is an example of how you can transpile these features on Webpack 4 using the @babel/preset-env preset:

 // webpack.config.js

 module.exports = (env) => ({
   // ...
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,
-        exclude: /node_modules/,
+        exclude: [
+          {
+            test: path.resolve(__dirname, 'node_modules'),
+            exclude: [path.resolve(__dirname, 'node_modules/@mui/x-charts')],
+          },
+        ],
       },
     ],
   },
 });

Renaming

Types

Some types got renamed for coherence:

Props

The Pie Chart onClick prop has been renamed onItemClick for consistency with other components. The behavior of this prop remains the same.

Animation

The Line Chart now have animation by default. You can disable it with skipAnimation prop. See animation documentation for more information.