Charts

Raised Slice Donut

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

Weekly focus hours

Point at any slice to compare it with the raised one.

Deep work18h · 45%

40 hours logged across 5 categories.The raise returns to deep work whenever you look away.

Using Raised Slice Donut

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

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: accent, activeIndex, raise, holeRatio, hueRange

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.

2432Slice picker donutChartsA donut driven by a dropdown in its header: the chosen slice pushes out and grows a detached outer arc, while the hole shows that slice's number.

2316Chip legend pieChartsA solid pie chart with no on-slice labels, paired with a wrapped row of color chips beneath it that names every slice and highlights in sync on hover.

2348Engraved label pieChartsA solid pie chart that sets each category name inside its own slice in an inverted color, so the breakdown reads without any outside labels or leader lines.

2377Leader line pieChartsA solid pie chart whose values sit outside the circle, each tied back to its slice by a two-segment leader line.