MUI X Charts

A collection of React chart components for data visualization.

Overview

MUI X Charts is a library of production-ready components for rendering charts with React. It uses D3.js for data manipulation and SVGs for rendering.

The components provide a high level of customization, with beautiful defaults as well as extensive configuration props and flexible composition options. Theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but they can also stand on their own and be customized to meet the needs of any design system.

The Charts package is open-core: The Community version is MIT-licensed and free forever, while more advanced features require a Pro commercial license. See MUI X Licensing for complete details.

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

All MUI X Charts

The MIT-licensed Community version of the Charts package covers the most common use cases for data visualization. The Pro plan, denoted by the blue cube icon () throughout the documentation, expands on the Community version to support more complex visualizations.