Charts - Quickstart

Install the MUI X Charts package to start building React data visualization components.

Installation

Install the Charts package that best suits your needs—Community or Pro:

Plan

npm install @mui/x-charts@next

Peer dependencies

Material UI

The Charts packages have a peer dependency on @mui/material. If you're not already using it, install it now:

npm install @mui/material @emotion/react @emotion/styled

React

react and react-dom are also peer dependencies:

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

Usage with D3

For those using CommonJS, the MUI X Charts provide a vendored package to access D3 libraries. You can import D3 functions from @mui/x-charts-vendor/d3-scale.

MUI X Charts can be rendered as self-contained or composable components. Self-contained components are simpler to get started with and are recommended for most common use cases. More complex visualization (such as combining Bar and Line Charts on a single plot) requires custom composition.

Self-contained Charts

import { BarChart } from '@mui/x-charts/BarChart';

Self-contained Chart components are imported and rendered as a single React component (such as <BarChart /> or <LineChart />) which contains all of the necessary subcomponents.

These components require a series prop describing the data to render, as well as a numerical value (rendered in pixels) for the height prop. The width prop is optional; if no value is provided, the Charts expand to fill the available space.

<BarChart
  xAxis={[
    {
      id: 'barCategories',
      data: ['bar A', 'bar B', 'bar C'],
      scaleType: 'band',
    },
  ]}
  series={[
    {
      data: [2, 5, 3],
    },
  ]}
  width={500}
  height={300}
/>

<BarChart
  xAxis={[
    {
      id: 'barCategories',
      data: ['bar A', 'bar B', 'bar C'],
      scaleType: 'band',
    },
  ]}
  series={[
    {
      data: [2, 5, 3],
    },
  ]}
  width={500}
  height={300}
/>

Press Enter to start editing

Composable Charts

More complex use cases require composition of the necessary subcomponents inside of a Chart Container wrapper. Subcomponents include:

Axis components – to define the X and Y axes
Plot components – to create Bars, Lines, or any other Chart type
Auxiliary components – to add Tooltips, Highlights, and more
Utilities – such as classes and types

See the Charts composition documentation for complete details.

The demo below shows how to use composition to create a custom Chart that combines a Bar and a Line Chart on a single plot:

Alphabet stocks

Chart layouts

The layout of a Chart is defined by two main spaces: the plot area, and the outer margins.

The width and height props define the dimensions of the SVG which is the root of the chart. Within this SVG, the plot area (or drawing area) serves as the canvas for data visualization, where the lines, bars, or other visual elements are rendered. The size of the plot area is determined by the margin = {top, bottom, left, right} object which defines its outer margins inside the SVG. The outer margin space is where information like axes, titles, and legends are displayed.

See the Styling documentation for complete details.

Server-side rendering

Charts support server-side rendering under two conditions:

width and height props must be provided – it's not possible to compute the SVG dimensions on the server.
Animations must be disabled with the skipAnimation prop – otherwise the animation will be in an empty state on first render.

// Pro users: add `-pro` suffix to package name
import type {} from '@mui/x-charts/themeAugmentation';

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