Stacked Bar Chart
Visualize multi-category data with production-ready stacked bars. Perfect for comparing composition across different groups with zero configuration required. Built for complex datasets with TypeScript-first design.
Revenue Breakdown by Product Category
Track monthly revenue split across Desktop, Mobile, and Services with interactive segments and dynamic legend
Installation
Get started with the StackedBarChart component in just a few steps.
npx mario-charts@latest add stacked-bar-chartExamples
Explore different configurations and use cases for comparing composition across categories.
Quarterly Sales by Region
Four-segment stacked bars showing sales distribution across North, South, East, and West regions with rich tooltips displaying all segments and totals
Marketing Channels - Modern Dashboard Style
Horizontal orientation with outline variant creates a contemporary look perfect for modern dashboards. Shows lead generation across Email, Social, Direct, and Referral channels
Product Mix by Store Location
Compare product category distribution across different store locations. Demonstrates proportion visualization for comparing composition
Large Dataset Performance
24 bars with 4 stacked categories each (96 total segments) demonstrating smooth performance with memoization and optimized rendering
- • 24 bars × 4 categories = 96 segments rendered smoothly
- • Memoized data processing prevents unnecessary recalculations
- • ResizeObserver handles responsive updates efficiently
- • Legend hidden for cleaner visualization with many bars
Loading State
Error State
Empty State
Variants & Orientations
Mix and match variants with orientations to achieve different visual styles for your dashboard.
Vertical + Filled
Classic stacked bars - solid colors, bottom-up stacking
Vertical + Outline
Modern minimalist look with outline-only segments
Horizontal + Filled
Left-to-right stacking with solid fills - great for rankings
Horizontal + Outline
Contemporary dashboard style - perfect for executive views
API Reference
Complete TypeScript interface with all available props and configurations for StackedBarChart.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly T[] | — | Array of data objects to display in the chart. Each object should contain the x-axis key and all y-axis keys for stacking |
xrequired | keyof T | — | Key from data object to use for x-axis labels (bar labels) |
yrequired | readonly (keyof T)[] | — | Array of keys from data object to stack. Each key represents a segment in the stacked bars. Order determines stacking sequence (bottom to top for vertical, left to right for horizontal) |
colors | readonly string[] | DEFAULT_COLORS | Array of colors for each stacked segment. Colors cycle through the array if more segments than colors |
variant | 'filled' | 'outline' | 'filled' | Visual style of bars - filled with solid colors or outline only for modern minimalist designs |
orientation | 'vertical' | 'horizontal' | 'vertical' | Direction of stacking - vertical (bottom-up) or horizontal (left-right) |
showLegend | boolean | false | Display legend showing all stacked categories with their colors |
height | number | 300 | Height of the chart in pixels |
loading | boolean | false | Show loading state with animated skeleton matching the selected variant and orientation |
error | string | null | null | Error message to display |
animation | boolean | true | Enable entrance animations with staggered segment reveals |
onSegmentClick | (data: T, stackKey: string, index: number) => void | — | Callback fired when a segment is clicked. Receives the data object, the segment key, and bar index |
className | string | — | Additional CSS classes to apply to the container |