shadcn.io is not affiliated with official shadcn/ui
About
Stack the bars when the total matters and so does what it's made of: traffic by device, revenue by plan. Comparing the top segment from month to month is harder than with grouped bars, so use those when the parts matter more than the sum.
Each month is one bar, desktop at the bottom and mobile on top, rounded at both ends and square where the two meet. A legend under the chart names the two colors, and the tooltip lists both values without the month.
Installation
Usage
import { ChartBarStackedLegend } from "@/components/charts/chart-bar-stacked-legend";<ChartBarStackedLegend />Customize
- Both
<Bar>elements sharestackId="a", which stacks them; the first in the JSX sits at the bottom. - The bottom bar has
radius={[0, 0, 4, 4]}and the top oneradius={[4, 4, 0, 0]}, so only the outer corners round. <ChartLegend content={<ChartLegendContent />} />reads labels and colors fromchartConfig.- This tooltip leaves out
cursor={false}, so Recharts shades the hovered month with a muted band.
FAQ
How are the bars stacked?
Both <Bar> elements share stackId="a". Any string works: bars with the same id stack, and the first <Bar> in the JSX sits at the bottom.
How are only the outer corners rounded?
Each bar gets its own corners: radius={[0, 0, 4, 4]} on the bottom one and radius={[4, 4, 0, 0]} on the top one. With a third series, give the middle one 0.
How do I move or change the legend?
<ChartLegend verticalAlign="top" content={<ChartLegendContent />} /> moves it above. ChartLegendContent reads labels from chartConfig, and hideIcon keeps plain swatches when the config has icons.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Multiple Bar Chart
Bar chartsTwo series grouped side by side for each month.
Stacked Area Chart
Area chartsTwo series stacked into one total, each band its own color.
Expanded Stacked Area Chart
Area chartsStacked areas expanded to 100%, so each band reads as a share.
Area Chart with Legend
Area chartsStacked areas with a legend naming each series.
Stacked Radial Chart
Radial chartsTwo series stacked on a half ring, with their total.
Advanced Chart Tooltip
TooltipsA tooltip with formatted values and a total row.