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.

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}>
  // If plots are in cartesian coordinates, provide the axis
  <CartesianContextProvider xAxis={xAxis} yAxis={yAxis}>
    // Add the components to render (even your custom ones)
    <BarPlot />
    <LinePlot />
    <XAxis />
  </CartesianContextProvider>
</ChartContainer>

Use responsive container

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