Charts - Getting Started

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

Installation

To install this library, run

npm install @mui/x-charts

With Next.js you might face the following error:

[ESM][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM)

The solution is to transpile the package by adding transpilePackages: ['@mui/x-charts'] to your next.config.js file—see this GitHub issue and comment for details.

Displaying Charts

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

Single Charts

For most common use cases, we recommend rendering as a single component.

The components intended to be rendered individually are named with "Chart" (as opposed to "Plot") and only require the series prop, which describes the data to render.

<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

Composed Charts

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

Inside this wrapper, you can render <XAxis />, <YAxis />, or any plot component (<BarPlot />, <LinePlot />, <AreaPlot />, or <ScatterPlot />). See the Composition doc for complete details.

Axis management

MUI X Charts are flexible when it comes to axis management: they support multiple-axis charts with any combination of scales and ranges.

See the Axis doc for more details.

Styling

The Charts library follows the same styling patterns as other MUI component libraries, such as Material UI.

See the Styling doc for details.