Skip to content

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.

252023250510

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>
2,0102,0112,0122,0132,014Years0510Results1k2k10kPIB

Use responsive container

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

2,0102,0112,0122,0132,014Years0510Results1k2k10kPIB