🚀 MUI X v6 is out! Discover what's new and get started now!

Charts - Bars

Bar charts express quantities through a bar's length, using a common baseline.

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #7885 if you want to see it land faster.

💬 To have a solution that meets your needs, leave a comment on the same issue. If you already have a use case for this component, or if you are facing a pain-point with your current solution.

<BarChart
  series={[
    { data: [2, 5, 3, 4, 1], stack: '1' },
    { data: [10, 3, 1, 2, 10], stack: '1' },
    { data: [10, 3, 1, 2, 10] },
  ]}
  width={600}
  height={500}
/>

<BarChart
  series={[
    { data: [2, 5, 3, 4, 1], stack: '1' },
    { data: [10, 3, 1, 2, 10], stack: '1' },
    { data: [10, 3, 1, 2, 10] },
  ]}
  width={600}
  height={500}
/>

Press Enter to start editing

Use composition

You can mix all charts together by using composition. The basic structure should be

// Provide data and layout
<ChartContainer series={series} width={500} height={500} xAxis={xAxis} yAxis={yAxis}>
  // Add the components to render (even your custom ones)
  <BarPlot />
  <LinePlot />
  <XAxis />
</ChartContainer>

Use responsive container

If you do not want to provide width or height you can use <ResponsiveChartContainer />