Dowe

CHARTS

ArcChart

Multi-arc circular summaries for progress, allocation, and proportional status.

CATEGORICAL SIGNAL

A ring of validated values

Each item contributes a labeled value and can opt into a Dowe color token.

DATA AND LEGEND

Show a readable allocation

ArcChart reads label and value from a Signal array. Use legendPosition and showInlineLabels together when the chart must remain understandable at a glance.

No data available

type ChartSlice
  label:string
  value:number
signal allocation type:ChartSlice[] value:[{ label:"Product" value:42 }]

ArcChart data:allocation variant:"soft" scheme:"surface" size:"lg" palette:"ocean" legendPosition:"right" centerText:"Q2 mix" centerValue:"100%" thickness:22 gap:4 showInlineLabels:true

PROGRESS AND ANGLES

Turn the arc into a progress signal

startAngle and endAngle create a deliberate gauge-like sweep. Keep the center value explicit so the percentage never depends on reading the graphic alone.

No data available

ArcChart data:progress variant:"outlined" scheme:"success" size:"lg" palette:"forest" centerText:"Release" centerValue:"68%" thickness:26 startAngle:-90 endAngle:270 hideValues:true showGlow:true
ArcChart data:allocation variant:"solid" scheme:"surface" size:"lg" palette:"sunset" legendPosition:"none" centerText:"Focus" centerValue:"4 teams" thickness:16 gap:2 startAngle:180 endAngle:540 showInlineLabels:true hideLegend:true

STATES

Loading and empty data stay thematic

Use loading for an in-flight data request and emptyLabel for a valid empty Signal. Both states preserve the chart surface and accessibility context.

No data available

No allocation yet

API

Props

ArcChart also accepts applicable common identity, spacing, sizing, visibility, radius, border, and accessibility props.

Prop	Type	Default
No data There are no records to display