Lighthouse scores radial with labels
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
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
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
- Parts of one total rather than separate scores out of 100: use the Chart Donut Center Total example
- A finished metric card with period tabs, KPI tiles and a range switcher built in: use the Area Chart blocks
- Headline numbers with trend badges and no plotted series: use the Stats blocks
- A whole overview page with summary tiles above a trend and a work list: use the Dashboard blocks
Agent notes
- Each
chartDatarow names its gradient infill, so a new platform also needs its key added to the gradient list in the defs PolarAngleAxissets the track to adomainof 0 to 100 and the tooltip prints values out of 100, so change both for another range- Replace the sample
chartDataarray, and give each series or slice name it uses achartConfigentry with a label and color - Each example caps its
Cardatmax-w-mdormax-w-xs; drop the cap so the chart fills a grid cell ChartContainersizes itself byaspect-videounless a class overrides it, so set an aspect ratio or height class to fit a fixed tile
Third-party API docs
- Recharts v3: API reference, docs
https://reui.io/components/chart/c-chart-25.mdget_example("c-chart-25")npx shadcn@latest add @reui/c-chart-25About Shadcn Chart Radial Scores
Lighthouse scores radial with labels. Built by composing Card, Chart. Uses recharts alongside the shadcn primitives. A free, open source shadcn chart example you can install with npx shadcn@latest add @reui/c-chart-25 and edit as your own code.
What You Can Build With Shadcn Chart Radial Scores
- Composes Card, Chart, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-chart-25
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Chart Examples
- Basic Bars Basic bar chart
- Multi-Dataset Bars Multi-dataset bar chart
- Diagonal Stripe Bars Diagonal stripe bar chart
- Dotted Bars Dotted pattern bar chart
- Striped Solid Bars Striped and solid bar chart
- 3D Gradient Bars 3D gradient bar chart
- Gradient Bars Gradient bar chart
- Isometric Bars 3D isometric bar chart
- Dotted Solid Bars Dotted and solid bar chart
- Duotone Bars Duotone gradient bar chart
- Animated Monochrome Bars Animated monochrome bar chart
- Horizontal Bars Vertical bar chart
Related Shadcn Component Categories
Open-source shadcn checkbox components for multi-select forms, settings preferences, and table selection.
Open-source shadcn code block components with Shiki syntax highlighting for AI chat, streaming agent output, diff review, and documentation.
Open-source shadcn collapsible components for expandable sections, detail rows, and progressive disclosure.
Open-source shadcn color picker components for brand settings, theme editors, label colors, and design tools.
Open-source shadcn combobox components for searchable selection, async lookup, and command menus.
Open-source shadcn command menu components for command palettes, global search, and power-user navigation.
Frequently Asked Questions
When should I use Shadcn Chart Radial Scores?
Use it for platform scores as 3 radial bars on a 0 to 100 track, each labeled with its value and filled with its own gradient.
Shadcn Chart as a whole fits:
- 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
For parts of one total rather than separate scores out of 100, use the Chart Donut Center Total example. For a finished metric card with period tabs, KPI tiles and a range switcher built in, use the Area Chart blocks. For headline numbers with trend badges and no plotted series, use the Stats blocks. For a whole overview page with summary tiles above a trend and a work list, use the Dashboard blocks.
How do I install Shadcn Chart Radial Scores?
Is Shadcn Chart Radial Scores free to use?
Which components does Shadcn Chart Radial Scores use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.