Bars & columns
Vertical bars - single, grouped, stacked, overlaid and histograms.
Bar charts compare values across categories or time buckets. Use grouped bars to compare series side by side and stacked bars to show how parts add up to a total.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { BarSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Tooltip } from "@reincharts/tooltip";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
const data = [
{ month: "Jan", revenue: 18.6 },
{ month: "Feb", revenue: 30.5 },
{ month: "Mar", revenue: 23.7 },
{ month: "Apr", revenue: 7.3 },
{ month: "May", revenue: 20.9 },
{ month: "Jun", revenue: 21.4 },
{ month: "Jul", revenue: 26.1 },
{ month: "Aug", revenue: 33.8 },
];
export default function Bars() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={data} theme={theme} xAccessor={(d) => d.month} initialView="fit">
<Pane>
<Grid vertical={false} />
<BarSeries name="Revenue (k$)" y="revenue" radius={4} widthRatio={0.6} />
<YAxis />
<Tooltip />
</Pane>
<XAxis />
<Crosshair horizontal={false} />
</ChartCanvas>
);
}Usage
<ChartCanvas data={data} xAccessor={(d) => d.month}>
<Pane>
<BarSeries y="revenue" radius={4} />
</Pane>
</ChartCanvas>Bars grow from base (default 0). When every value is non-negative they sit on the bottom of the pane; with negative
values they grow down from 0. Use y0 for floating (range) bars, radius for rounded ends and widthRatio /
maxWidth for the width.
Histograms
fill can be a function of the datum (and the theme), e.g. to color positive and negative values.
Grouped bars
<GroupedBarSeries ys={["a", "b", "c"]}> draws one bar per accessor side by side in each slot. Colors default to the
theme palette.
See the grouped bars example →
Stacked bars
<StackedBarSeries> stacks the values; offset="percent" normalises each stack to 100%.
See the stacked bars example →
Overlaid bars
<OverlayBarSeries> draws the bars of a slot over each other from the same base, the largest at the back, for
comparing values that share a scale (budget vs actual, this year vs last year).