Skip to content
Fieldbook
Menu
Sign in
EN

Charts

Concentric Ring Chart

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.

Using Concentric Ring Chart

Concentric Ring Chart uses the card preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
strokeWidthnumber14From 6 to 28; step 1
ringGapnumber6From 0 to 16; step 1
accentcolor#7C5CFFNo additional limit in the metadata.
animationSpeednumber1100From 400 to 2400; step 100
showCenterLabelbooleantrueNo additional limit in the metadata.
Which frameworks are available for Concentric Ring Chart?

Concentric Ring Chart is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Concentric Ring Chart depend on?

The React metadata lists these npm dependencies beyond React: motion.

What accessibility details are visible in Concentric Ring Chart?

The React source for Concentric Ring Chart includes: native elements (button); attributes and handlers (aria-hidden, aria-label); explicit roles (img). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Concentric Ring Chart handle reduced motion?

Concentric Ring Chart reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: reduceMotion ? 0.05 : 0.5; reduceMotion ? 0.05 : animationSpeed / 1000; reduceMotion ? false : { opacity: 0, scale: 0.95 }. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Donut share chart component, a Fieldbook UI component in Charts.
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.
Still of the Donut with total component, a Fieldbook UI component in Charts.
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.
Still of the Raised Slice Donut component, a Fieldbook UI component in Charts.
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.
Still of the Series Switch Trend component, a Fieldbook UI component in Charts.
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.
Still of the Spark line component, a Fieldbook UI component in Charts.
1541Spark lineChartsA row of metric tiles whose sparklines draw themselves on mount and follow the pointer with a crosshair that reads the value under it.
Still of the Activity cell heatmap component, a Fieldbook UI component in Charts.
1840Activity cell heatmapChartsA calendar grid of small tinted squares that sweeps in on a diagonal wave and lets a level strip isolate one intensity at a time.