Bar Chart

Usage

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

<Chart.Root>
  <BarChart>
    <CartesianGrid />
    <XAxis />
    <YAxis />
    <Bar />
  </BarChart>
</Chart.Root>

Examples

Bar color

Here's an example of coloring the bars based on the data.

<Bar dataKey="allocation">
  <Cell fill="red" />
</Bar>

Bar Label

Render the LabelList component from recharts to display the label of the bar.

Formatter

Use the formatter provided from the useChart hook to format the value axis.

<YAxis
  tickFormatter={chart.formatNumber({
    style: "currency",
    currency: "USD",
    notation: "compact",
  })}
/>

No Gap

To remove the gap between the bars, set the barCategoryGap prop to 0 on the BarChart component.

Fill With Value

Compose the LabelList and Cell components from recharts to render bars upward or downward based on the value.

<Bar dataKey="views">
  <LabelList dataKey="views" position="top" />
  {chart.data.map((item, index) => (
    <Cell key={index} fill={item.views > 0 ? "green" : "red"} />
  ))}
</Bar>

Horizontal

Pass the layout="vertical" prop to the BarChart component to render the bars horizontally.

Rounded

Pass the radius prop to the Bar component to render the bars with rounded corners.

Range

Passing an array of values to the dataKey prop will render a range bar that indicates the lower and upper bounds of the values.

const chart = useChart({
  data: [
    { name: "UK", value: [10, 20] },
    // ...
  ],
})

Multiple

Render multiple Bar components to create a bar chart with multiple series.

Legend Position

Pass the layout prop to the Legend component from recharts to configure the position of the legend.

Percent

Set the stackOffset prop to expand on the BarChart component to render the bars with value normalized to 100%.

Stacked

Render multiple Bar components and set their stackId prop to the same value to stack them.

Stacked Mix

Render multiple Bar components with different stackId props to create a bar chart with some series stacked and some not.

Reference Lines

Use the ReferenceLine component from recharts to make reference to a specific value on the chart.

Histogram

For those mathematics wiz, you can compose the barchart to create a histogram.

Avatar Ticks

Here's an example of rendering images as the XAxis tick by leveraging svg foreignObject.

Candlestick

Combine the bar chart with the ErrorBar and Bar components to create a candlestick chart.

Composition

Here's an example of composing the BarChart, Card and SegmentGroup components.