Stacked Bar Chart
Compare composition across categories with stacked bars. Each bar shows the total, with segments representing parts of the whole.
Usage
import { StackedBarChart } from "@chartts/react"
<StackedBarChart
data={quarterlyData}
x="quarter"
y={["productA", "productB", "productC"]}
radius={6}
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| x | keyof T | Key for category labels |
| y | (keyof T)[] | Keys for stacked values |
| normalized | boolean | Normalize to 100%. Default: false |
| radius | number | Border radius for bar corners. Default: 4 |
Features
- Absolute and normalized (100%) modes
- Automatic legend
- Value labels per segment
- Animated stagger entry
- Horizontal layout option
- Custom color per series
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram