Stacked Bar Chart
Charts
Data Visualization
Visualize composition and breakdown across categories over time with stacked horizontal bars.
Preview
Traffic by device type with stacked segments
Desktop
Mobile
Tablet
Jan
90
Feb
105
Mar
106
Apr
124
May
125
Jun
146
Percentage Mode
100% stacked bars showing proportional distribution
Desktop
Mobile
Tablet
Jan
100%
Feb
100%
Mar
100%
Apr
100%
May
100%
Jun
100%
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Record<string, unknown>[] | — | Array of data objects with category values |
categories* | string[] | — | Keys for stacked categories |
labelKey* | string | — | Key for row labels |
colors | string[] | — | Custom colors for each category |
mode | 'stacked' | 'percent' | 'grouped' | 'stacked' | Chart display mode |
barHeight | number | 40 | Height of each bar in pixels |
showTotal | boolean | true | Show total value on right |
showLegend | boolean | true | Show color legend |
Usage
Import and implementation examples
// Stacked bar chart data
const data = [
{ month: 'Jan', desktop: 45, mobile: 30, tablet: 15 },
{ month: 'Feb', desktop: 52, mobile: 35, tablet: 18 },
{ month: 'Mar', desktop: 48, mobile: 38, tablet: 20 },
]
const maxTotal = Math.max(...data.map(d => d.desktop + d.mobile + d.tablet))
// Render stacked bars
{data.map((item, i) => {
const desktopWidth = (item.desktop / maxTotal) * 100
const mobileWidth = (item.mobile / maxTotal) * 100
const tabletWidth = (item.tablet / maxTotal) * 100
return (
<div key={i} className="flex items-center gap-4">
<div className="w-12">{item.month}</div>
<div className="flex-1 h-10 flex rounded-lg overflow-hidden">
<div className="bg-indigo-500" style={{ width: `${desktopWidth}%` }} />
<div className="bg-teal-500" style={{ width: `${mobileWidth}%` }} />
<div className="bg-amber-500" style={{ width: `${tabletWidth}%` }} />
</div>
<div className="w-16 text-right">{item.desktop + item.mobile + item.tablet}</div>
</div>
)
})}
// For 100% stacked mode, divide by row total instead of max totalFeatures
Built-in functionality
- Multiple modes: Stacked, grouped, and percent modes
- Interactive legend: Toggle series visibility
- Segment gaps: Optional spacing between segments
- Hover states: Highlight segments on hover
- Tooltips: Show values on hover
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="img" for chart containeraria-label describes chart contentSegments have title attributesKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Chart is not keyboard interactive |
Notes
- Legend provides text labels for colors
- Values shown in tooltips and totals
- Consider data table for complex data