Chart: Stacked bars

Bars with the same stackId stack. Round only the outer ends, so the stack reads as one bar.

"use client"

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

const chartData = [
  { quarter: "Q1", starter: 120, pro: 86, team: 34 },
  { quarter: "Q2", starter: 138, pro: 104, team: 51 },
  { quarter: "Q3", starter: 131, pro: 122, team: 69 },
  { quarter: "Q4", starter: 149, pro: 141, team: 88 },
]

const chartConfig = {
  starter: {
    label: "Starter",
    color: "var(--chart-1)",
  },
  pro: {
    label: "Pro",
    color: "var(--chart-2)",
  },
  team: {
    label: "Team",
    color: "var(--chart-3)",
  },
} satisfies ChartConfig

export function ChartStacked() {
  return (
    <ChartContainer
      aria-label="Stacked bar chart of Starter, Pro and Team plans"
      config={chartConfig}
      className="h-60 w-full max-w-md"
    >
      <BarChart data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="quarter"
          tickLine={false}
          axisLine={false}
          tickMargin={10}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar
          dataKey="starter"
          stackId="plans"
          fill="var(--color-starter)"
          radius={[0, 0, 4, 4]}
        />
        <Bar dataKey="pro" stackId="plans" fill="var(--color-pro)" />
        <Bar
          dataKey="team"
          stackId="plans"
          fill="var(--color-team)"
          radius={[4, 4, 0, 0]}
        />
      </BarChart>
    </ChartContainer>
  )
}

Add this example

This adds the example as components/examples/chart/stacked.tsx, together with the Chart component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/chart-stacked.json

To add only the component, follow the Chart installation.

Props in this example

The Chart props this example sets, from the API reference.

ChartContainer

Prop	Type	Default
`config`Labels, icons and colors for each data key.	`ChartConfig`	`–`

ChartTooltip

Prop	Type	Default
`content`Usually <ChartTooltipContent />.	`ReactElement \| (props) => ReactNode`	`–`

ChartLegend

Prop	Type	Default
`content`Usually <ChartLegendContent />.	`ReactElement \| (props) => ReactNode`	`–`

Every prop is in the Chart API reference.

More Chart examples

See them all, with keyboard support and accessibility notes, on the Chart page.