synthetic
GaugeChart
A half-circle dial showing one value between a minimum and a maximum.
Project progressHarbour rebrand, 84% complete
In context
Project healthOne dial per project, owner underneath
Harbour rebrandDue 24 Oct
On trackMC
Maya Chen
Tideline mobileDue 7 Nov
ReviewJW
Jonas Weber
Crew interviewsDue 17 Oct
LatePN
Priya Nair
Rota exportDue 10 Oct
DoneLS
Leo Santos
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | number | Yes | — |
min | number | undefined | No | 0 |
max | number | undefined | No | 100 |
label | string | undefined | No | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
size | number | undefined | No | 240 |
valueFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
data-rebar-* attributes
data-rebar-component="gauge-chart" on the root <figure>.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own (it recommends @ant-design/charts, a separate package built on G2Plot); there's no direct 1:1 antd component mapping for a gauge chart, so a migration reimplements this chart against whichever charting library the target project already uses.