Charts

A fast and extendable library of react chart components for data visualization.

Overview

The @mui/x-charts is an MIT library to render charts. It relies on D3.js for data manipulation and SVG for rendering.

Like other MUI X components, charts are built to be production-ready components with nice integration into your application for common use cases. They also provide a high level of customization.

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function ChartsOverviewDemo() {
  return (
    <BarChart
      series={[
        { data: [35, 44, 24, 34] },
        { data: [51, 6, 49, 30] },
        { data: [15, 25, 30, 50] },
        { data: [60, 50, 15, 25] },
      ]}
      height={290}
      xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
    />
  );
}

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function ChartsOverviewDemo() {
  return (
    <BarChart
      series={[
        { data: [35, 44, 24, 34] },
        { data: [51, 6, 49, 30] },
        { data: [15, 25, 30, 50] },
        { data: [60, 50, 15, 25] },
      ]}
      height={290}
      xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
    />
  );
}

Press Enter to start editing

Using the documentation

single components with nice defaults
extensive configuration props
subcomponents for composition

To modify the styling of charts you can rely on all the MUI styling tools, such as the theme override, or the sx props.

Documentation

Each component has two docs pages:

The first one describes behaviors that are specific to this component.
The second one provides a set of basic examples.

For features shared across multiple components, likes axes and legends, visit their corresponding documents:

What's next?

Continue to the Getting started doc and learn how to prepare your application for Charts.