Node / Charts · guide
Polar area chart
Current Apexify.js 6.0.0 documentation for Polar area chart.
Equal angular slices; radius encodes value (or √ scaled for area proportionality).
SOURCEtypescript
typescript
PolarAreaSlice
label, value (> 0 contributes to total), color, gradient, opacity.
Throws if no slices or total ≤ 0.
PolarAreaChartOptions
| Field | Purpose |
|---|---|
scale | radius (linear radius, default) vs area (sqrt(value/max) feel). |
polar.innerRadiusRatio | Donut hole (0 = solid centre). |
polar.labelBandRatio | Outer band for labels (default ~0.18). |
polar.sliceStrokeWidth, sliceStrokeColor | Divider strokes. |
polar.startAngleDeg | Default -90° (first slice from top). |
polar.opacity | Global multiplier × per-slice opacity. |
labels.showValues, valueFormat, sliceLabelFontSize, sliceLabelColor | Numeric overlay on wedges. |
labels.valueFormat
When labels.showValues is true, each wedge draws valueFormat(slice.value, slice.value / total) at mid‑radius. total is the sum of Math.max(0, value) across slices (same total used for angles).
| Concern | Detail |
|---|---|
| Arguments | value — raw slice value; fraction — share of total (0…1). |
| Default | If omitted: (v) => String(Math.round(v * 100) / 100) — only value is formatted; the second argument is still passed if you replace the function. |
| Styling | sliceLabelFontSize, sliceLabelColor apply to that text. |
Example — budget split (area scaling)
SOURCEtypescript
typescript
Example — valueFormat: percent with one decimal
SOURCEtypescript
typescript
Example — valueFormat: raw count and percent
SOURCEtypescript
typescript
Example — valueFormat: compact SI‑style counts
SOURCEtypescript
typescript