# Shadcn Active Segment Donut

> Active segment donut with center label

- Type: example, free and open source (MIT)
- Component: [Chart](https://reui.io/components/chart.md)
- Page: https://reui.io/components/chart/c-chart-22
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/chart.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/chart.md
- MCP: `get_example("c-chart-22")`
- Registry item: https://reui.io/r/styles/base-nova/c-chart-22.json
- Uses: Card, Chart

## Best for

Plan tiers in a donut whose hovered slice grows outward, with paid users at the center and the paid share in the subtitle

## Agent notes

- `paidUsers` subtracts the first `chartData` row as the free tier, so keep free first or sum the paid plans by `plan`

## When not to use

- Slices that stay still on hover with a percent in the center: use [Donut Center Stats](https://reui.io/components/chart/c-chart-20.md) (`get_example("c-chart-20")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)

## Install

```bash
npx shadcn@latest add @reui/c-chart-22
```

## About Shadcn Chart

### When to use

- Trend cards that plot monthly or weekly figures as bars, areas or a line
- Part to whole breakdowns such as traffic sources, task status or plan tiers as donut and pie slices
- Score profiles across several axes, such as team skills or audit results, as radar or radial bars

### When not to use

- A finished metric card with period tabs, KPI tiles and a range switcher built in: use the [Area Chart blocks](https://reui.io/blocks/chart/area-chart.md)
- Headline numbers with trend badges and no plotted series: use the [Stats blocks](https://reui.io/blocks/application/stats.md)
- A whole overview page with summary tiles above a trend and a work list: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)

### Agent notes

- Replace the sample `chartData` array, and give each series or slice name it uses a `chartConfig` entry with a label and color
- Each example caps its `Card` at `max-w-md` or `max-w-xs`; drop the cap so the chart fills a grid cell
- `ChartContainer` sizes itself by `aspect-video` unless a class overrides it, so set an aspect ratio or height class to fit a fixed tile

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.