# Shadcn Radial Scores

> Lighthouse scores radial with labels

- Type: example, free and open source (MIT)
- Component: [Chart](https://reui.io/components/chart.md)
- Page: https://reui.io/components/chart/c-chart-25
- 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-25")`
- Registry item: https://reui.io/r/styles/base-nova/c-chart-25.json
- Uses: Card, Chart

## Best for

Platform scores as 3 radial bars on a 0 to 100 track, each labeled with its value and filled with its own gradient

## Agent notes

- Each `chartData` row names its gradient in `fill`, so a new platform also needs its key added to the gradient list in the defs
- `PolarAngleAxis` sets the track to a `domain` of 0 to 100 and the tooltip prints values out of 100, so change both for another range

## When not to use

- Parts of one total rather than separate scores out of 100: use [Donut Center Total](https://reui.io/components/chart/c-chart-19.md) (`get_example("c-chart-19")`)

## 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-25
```

## 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.