Horizontal Bar Chart
A bar chart turned on its side, for long category labels or a ranking.
Introduction
Set indexAxis: "y" and the bars run horizontally. Nothing else changes.
All chart types share one component. Installation, the palette, and the reason every chart ships with a screen-reader data table are on the Charts page.
Example
Pending applications by district
Districts ordered by the size of their pending queue.
| Category | Pending applications |
|---|---|
| Pune | 1240 |
| Nashik | 980 |
| Nagpur | 760 |
| Thane | 610 |
| Solapur | 340 |
'use client';
import { useMemo } from 'react';
import { Chart } from '@/components/ui/chart';
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
const DISTRICTS = ['Pune', 'Nashik', 'Nagpur', 'Thane', 'Solapur'];
export default function Component() {
const data = useMemo(
() => ({
labels: DISTRICTS,
datasets: [{ label: 'Pending applications', data: [1240, 980, 760, 610, 340] }],
}),
[],
);
const options = useMemo(() => ({ indexAxis: 'y' as const }), []);
return (
<Chart
type='bar'
data={data}
options={options}
title='Pending applications by district'
summary='Districts ordered by the size of their pending queue.'
className='max-w-[640px]'
/>
);
}When to use it
Use it when category names are too long to sit under vertical bars, or when the point is a ranking — a reader scans a vertical list faster than a horizontal one.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.