MUI X Charts

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

Overview

The @mui/x-charts is an MIT library for rendering charts relying on D3.js for data manipulation and SVG for rendering. And, like other MUI X components, charts are production-ready components that integrate smoothly into your app.

With a high level of customization, MUI X Charts provides three levels of customization layers: single components with great defaults, extensive configuration props, and subcomponents for flexible composition. Additionally, you can also use all the MUI System tools, such as the theme override or the sx prop.

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

The MUI X Charts documentation has a slightly different structure than other MUI X components. Instead of having a long page for each, the pages are divided in two: