Charts

Concentric Ring Chart

Nested progress rings that sweep to their own percentage on mount and share a live center total, like a multi-dial gauge.

0Sessions

Using Concentric Ring Chart

Nested progress rings that sweep to their own percentage on mount and share a live center total, like a multi-dial gauge.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: strokeWidth, ringGap, accent, animationSpeed, showCenterLabel

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2336Donut share chartChartsA five slice donut with a hollow centre and hairline gaps that sweeps open on mount and lifts whichever slice the pointer is over.

2337Donut with totalChartsA donut chart that puts the running total in its own hole and swaps that readout to whichever slice is hovered or focused.

2092Highlight trail chartChartsA multi-line trend chart where hovering brightens a short trailing segment of one series while the rest of it and the other lines dim.

1871Notched arc gaugeChartsA score dial built from tapered notches that light up in sequence around an open arc, with a rolling number at its centre.

2408Raised Slice DonutChartsA donut where one slice is permanently raised above the ring by extending its outer radius, and the raise glides to any other slice on hover.

2292Series Switch TrendChartsA ninety-day trend line with two total tiles in the header; picking a tile morphs the line to that series and tweens the stroke to its accent.