Bar Chart
Comparing a value across categories, or two series side by side.
Introduction
Bars are the default for comparing quantities across named categories. Length is the easiest visual encoding to read accurately, which is why a bar chart beats a pie almost every time.
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
Ration card applications by month
Applications received against applications cleared, April to October.
| Category | Applications received | Applications cleared |
|---|---|---|
| Apr | 420 | 450 |
| May | 405 | 840 |
| Jun | 190 | 105 |
| Jul | 140 | 505 |
| Aug | 905 | 190 |
| Sep | 730 | 350 |
| Oct | 45 | 140 |
'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: MONTHS,
datasets: [
{ label: 'Applications received', data: [420, 405, 190, 140, 905, 730, 45] },
{ label: 'Applications cleared', data: [450, 840, 105, 505, 190, 350, 140] },
],
}),
[],
);
return (
<Chart
type='bar'
data={data}
title='Ration card applications by month'
summary='Applications received against applications cleared, April to October.'
className='max-w-[640px]'
/>
);
}When to use it
Use it when the categories are discrete and the reader needs to compare exact magnitudes. Order the categories meaningfully — by value, or by a sequence the reader already knows, such as months.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.