Horizontal bars
Bars along a category y axis, with zoom and pan.
Horizontal bars put the categories on the y axis, which leaves room for long labels and suits rankings and progress charts.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { HorizontalBarSeries } 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";
// GDP 2025, trillions of US$
const data = [
{ country: "United States", gdp: 30.3, growth: 1.8 },
{ country: "China", gdp: 19.5, growth: 4.6 },
{ country: "Germany", gdp: 4.9, growth: 0.4 },
{ country: "India", gdp: 4.2, growth: 6.4 },
{ country: "Japan", gdp: 4.2, growth: 0.6 },
{ country: "United Kingdom", gdp: 3.8, growth: 1.1 },
{ country: "France", gdp: 3.3, growth: 0.7 },
{ country: "Italy", gdp: 2.5, growth: 0.5 },
];
export default function HorizontalBars() {
const theme = useDocsChartTheme();
return (
// linear x mode + a category price scale: datum i is drawn in band i
<ChartCanvas data={data} theme={theme} xMode="linear" initialView="fit">
<Pane scales={{ right: { categories: data.map((d) => d.country), margins: { top: 0.04, bottom: 0.04 } } }}>
<Grid horizontal={false} />
<HorizontalBarSeries name="GDP (T$)" x="gdp" radius={4} widthRatio={0.65} />
<YAxis />
<Tooltip />
</Pane>
<XAxis />
<Crosshair vertical={false} />
</ChartCanvas>
);
}Usage
Horizontal bars swap the axes: the values run along a continuous x axis and the categories are a category price
scale. Use xMode="linear" and give the pane's scale the category labels; datum i is drawn in band i.
<ChartCanvas data={data} xMode="linear">
<Pane scales={{ right: { categories: data.map((d) => d.country) } }}>
<HorizontalBarSeries x="gdp" radius={4} />
<YAxis />
</Pane>
<XAxis />
</ChartCanvas>Pan and zoom work along the value axis, and the tooltip picks the bar under the pointer. x0 makes floating bars
(e.g. a Gantt chart).
Grouped and stacked
<GroupedHorizontalBarSeries> and <StackedHorizontalBarSeries> take the same ys / colors / names props as
their vertical versions.