# Chart: Stacked bars

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

Example: https://hextaui.com/docs/chart/examples/stacked
Component docs: https://hextaui.com/docs/chart.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/chart-stacked.json
```

This adds `components/examples/chart/stacked.tsx` with the Chart component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/chart/stacked.tsx"
"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>
  )
}
```

## Props in this example

### ChartContainer

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

### ChartTooltip

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

### ChartLegend

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

## More Chart examples

- [Bar chart](https://hextaui.com/docs/chart/examples/bar.md)
- [Line chart](https://hextaui.com/docs/chart/examples/line.md)
- [Horizontal bars](https://hextaui.com/docs/chart/examples/horizontal.md)
- [Donut](https://hextaui.com/docs/chart/examples/pie.md)
- [Radar](https://hextaui.com/docs/chart/examples/radar.md)
- [Tooltip](https://hextaui.com/docs/chart/examples/tooltip.md)
- [Formatting values](https://hextaui.com/docs/chart/examples/value-format.md)
- [Icons](https://hextaui.com/docs/chart/examples/icons.md)
- [Light and dark colors](https://hextaui.com/docs/chart/examples/theme.md)
- [Negative values](https://hextaui.com/docs/chart/examples/negative.md)
- [Long labels](https://hextaui.com/docs/chart/examples/long-labels.md)
- [Right to left](https://hextaui.com/docs/chart/examples/rtl.md)