Hewn
Components

Components

DonutChart

Part-to-whole radial chart with a required summary and focusable slices.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add donut-chart

DonutChart is the radial sibling of Area and Bar: same status frames, same tooltip, slices you can Tab through.

Usage

TSX
import { DonutChart } from "@hewnui/ui";

<DonutChart
  summary="Traffic share last 24h"
  slices={[
    { id: "edge", label: "Edge", value: 62 },
    { id: "origin", label: "Origin", value: 38 },
  ]}
>
  <DonutChart.Tooltip />
</DonutChart>

Preview

Traffic share last 24h

Accessibility

  • The SVG is role="img" named by the required summary
  • Every slice is focusable and labelled "{name}: {value}"
  • Focus opens the same tooltip as hover
  • status="loading" and empty (sum ≤ 0) use role="status"; status="error" uses role="alert"

API reference

Props for DonutChart from @hewnui/ui/donut-chart. Generated from component types — not hand-written.

Prop

Type

BarChart

Categorical bar chart with optional multi-series grouping.

Card

Elevated panel with optional header, body, and footer.

On this page

UsagePreviewAccessibility