ns-ui

Chart Donut Halftone

Donut chart for an ordinal size scale where wedge angle carries share and ordered-dither density carries tier order, instead of a second colour.

Use when part-to-whole over a small ORDINAL scale (size tiers, funnel stages, age bands) where angle shows share and ink density shows the tier's position in the scale — not a general-purpose pie for nominal categories (products, teams, regions), where chart-bar-halftone is the correct default per the dataviz form heuristic.

Install

npx shadcn add https://design.helpmarq.com/r/chart-donut-halftone.json
  • chart
  • donut
  • pie
  • data-viz
  • dither
  • halftone
  • svg
  • ink

ns-ui / chart-donut-halftone

ORDERS BY SIZE

Props

PropTypeDefaultDescription
data?ChartDonutHalftoneDatum[]—ordinal, low -> high tier order (e.g. size tiers, funnel stages)
title?string——
unit?string—unit suffix appended to the center readout, e.g. "orders"
className?string——
Back to the catalog