Stacked Bar Chart
Parts of a whole, compared across categories.
Introduction
Stacking shows both the total and its composition. It is the right chart for "how many, and made up of what".
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
Application outcomes by month
Each month split into approved, rejected and awaiting documents.
| Category | Approved | Rejected | Awaiting documents |
|---|---|---|---|
| Apr | 320 | 60 | 40 |
| May | 380 | 55 | 70 |
| Jun | 150 | 30 | 25 |
| Jul | 120 | 15 | 30 |
| Aug | 640 | 140 | 125 |
| Sep | 520 | 120 | 90 |
| Oct | 40 | 10 | 12 |
'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: 'Approved', data: [320, 380, 150, 120, 640, 520, 40] },
{ label: 'Rejected', data: [60, 55, 30, 15, 140, 120, 10] },
{ label: 'Awaiting documents', data: [40, 70, 25, 30, 125, 90, 12] },
],
}),
[],
);
const options = useMemo(() => ({ scales: { x: { stacked: true }, y: { stacked: true } } }), []);
return (
<Chart
type='bar'
data={data}
options={options}
title='Application outcomes by month'
summary='Each month split into approved, rejected and awaiting documents.'
className='max-w-[640px]'
/>
);
}When to use it
Use it when the total matters as much as the split. If the reader mainly needs to compare one component across categories, group the bars instead — a segment floating in the middle of a stack is hard to compare.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.