A fast and extendable library of react chart components for data visualization.
@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.
To achieve this goal, the
@mui/x-charts relies on three levels of customization:
single components with nice default, extensive configuration props, and 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
To install this library, run
npm install @mui/x-charts
Charts can be rendered in two ways. With a single component or by composing sub-components.
For common use cases, the single component is the recommended way.
Those components' name ends with "Chart" and only require the
series prop, describing the data to render.
They also have plenty of other props to customize the chart behavior.
To combine different charts, like lines with bars, you can use composition with
<ChartContainer /> wrapper.
Inside this wrapper, you can render
<YAxis />, or any plot component (
The library is flexible about axis management. It supports multiple-axis charts with any combination of scales and ranges.
For more details, have a look at the axis docs page.
The library is following MUI styling behavior, such that customizing charts is made as simple as customizing buttons.
For more details, have a look at the styling docs page.