Charts - Getting Started

Get started with the MUI X Charts components. Install the package, configure your application, and start using the components.

Installation

Using your favorite package manager, install @mui/x-charts-pro for the commercial version, or @mui/x-charts for the free community version.

The Charts package has a peer dependency on @mui/material. If you are not already using it in your project, you can install it with:

Please note that react and react-dom are peer dependencies too:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Style engine

Material UI is using Emotion as a styling engine by default. If you want to use styled-components instead, run:

Take a look at the Styled engine guide for more information about how to configure styled-components as the style engine.

Usage with D3

To help folks using CommonJS, the @mui/x-charts package uses a vendored package named @mui/x-charts-vendor to access D3 libraries.

If you need some D3 functions, you can import them with @mui/x-charts-vendor/d3-color.

Displaying charts

A Chart can be rendered in one of two ways: as a single component, or by composing subcomponents.

Single charts

For common use cases, the single component is the recommended way. Those components' names end with "Chart", as opposed to "Plot", and only require the series prop describing the data to render.

Composed charts

To combine different Charts, like Lines with Bars, you can use composition with the ChartContainer wrapper.

Inside this wrapper, render either axis components, such as XAxis and YAxis, or any plot component like BarPlot, LinePlot, AreaPlot, and ScatterPlot.

Visit the Composition page for more details.

Positions

Charts are composed of two main areas. The SVG defined by its width and height delimits the available space.

Within this SVG, a dedicated "drawing area" (aka "plot area") serves as the canvas for data representation. Here, elements like lines, bars, and areas visually depict the information. It's controlled by the margin = {top, bottom, left, right} object defining the margin between the SVG and the drawing area.

The space left by margins can display axes, titles, a legend, or any other additional information.

For more information about the position configuration, visit the styling page.

Axis management

MUI X Charts have a flexible approach to axis management, supporting multiple-axis charts with any combination of scales and ranges.

Visit the Axis page for more details.

Styling

MUI X Charts follows the Material UI styling and features all of the customization tools you'd find there, making tweaking charts as straightforward as designing buttons.

Visit the Styling page for more details.

TypeScript

In order to benefit from the CSS overrides and default prop customization with the theme, TypeScript users need to import the following types. Internally, it uses module augmentation to extend the default theme structure.

import type {} from '@mui/x-charts/themeAugmentation';
import type {} from '@mui/x-charts-pro/themeAugmentation';

const theme = createTheme({
  components: {
    MuiChartsAxis: {
      styleOverrides: {
        tick: {
          stroke: '#006BD6',
        },
      },
    },
  },
});