v0.1.0

<hf-donut>Custom elementDataFree

Donut

Donut chart that sweeps in clockwise; hovering or arrowing to a segment pops it outward and rolls its share into the centre.

View as Markdown

<hf-donut>· loading

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-donut>

Props

dataremounts

labelremounts

totalremounts

<HfDonut
  data="Code:42,Writing:23,Analysis:18,Other:17"
  label="Conversations"
  total="1,284"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-donut

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-donut.json

Usage

import { HfDonut } from "@/components/lumesec/hf-donut";

export function Example() {
  return (
    <HfDonut data="Code:42,Writing:23,Analysis:18,Other:17" total="1,284" label="Conversations" />
  );
}

Behaviour

Sweeps in clockwise. Hovering a segment or legend row pops it outward and rolls its share into the middle; arrow keys work too.

API reference

Attributes

dataReact propdataTypestringDefaultCode:42,Writing:23,Analysis:18,Other:17

Comma-separated Label:value pairs. Values are relative and shown as rounded percentages of their sum.

labelReact proplabelTypestringDefaultUsage by task

Text in the centre and the start of the aria-label.

totalReact proptotalTypestring

Text in the centre when no segment is focused. Defaults to the sum of the values.

Properties

data (read-only)TypeArray<{ label: string, v: number }>

Segments parsed from the attribute.

Keyboard

Keys	Action
ArrowRight / ArrowDown	Focus the next segment, wrapping.
ArrowLeft / ArrowUp	Focus the previous segment, wrapping.

Accessibility

The canvas has role="img", tabindex="0" and an aria-label listing each segment percentage.
The centre text is not a live region.
Legend rows react to pointer hover only. Moving focus away from the canvas clears the highlight.
Reduced motion: the donut appears without the sweep and the centre text swaps without rolling; the segment pop still eases.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg and --ui-muted.

Notes

Colours cycle through accent, ok, warn, danger and muted; a sixth segment reuses the accent colour.
Attributes are read once on connect and are not observed.
The chart is fixed at 176 × 176 px.

<hf-area>

<hf-stat>

<hf-funnel>

<hf-barlist>

Was this page helpful?

Related