build69
build69  /  Components  /  Charts  /  RadialChart

RadialChart

v1.0.4Updated 25 Jul 2026

Recharts-backed radial (gauge) chart with single-gauge, percent-progress, and multiple-rings variants. Use for goal completion and rate indicators.

Preview

Live · 10 stories
Single GaugeOpen ↗
Why this is recommendedchartradialgaugerecharts+3

RadialChart — single gauge.

Recommended for+14
  • Goal completion
  • Collection rate / KPI gauge
  • Score indicators
Tags+6
chartradialgaugerechartsprogressdata-vizsingle
Features+4
  • Single gauge
  • Percent / rate display in center
  • Multiple concentric rings
  • Tonal palette
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • Multi-metric compare (use BarChart)
  • Time-series (use LineChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "RadialChart" })

Usage

import { RadialChart } from '@/components/data-viz/radial-chart';

<RadialChart value={72} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

0..100 value (single gauge)

number
rings

Multiple rings config

RadialRing[]

Related