ApexCharts Circular Progress KPI
A single radial bar styled as a hero KPI gauge — full-circle track, gradient fill from blue at the start to violet at the end, large centre value with an explanatory label below. ApexCharts' radialBar makes the gradient effortless via `fill: { type: 'gradient' }` with `gradientTo
Template details
- chart
- gauge
- radial
- kpi
- progress
- single-metric
- apexcharts
- apex
When to use this template
This visualization clearly communicates the current status of a single key performance indicator relative to a predefined target or maximum. It allows an analyst to quickly grasp progress towards a goal, identify whether a metric is on track, and draw immediate attention to critical numbers that require monitoring or action.
- Single, aggregated numeric values.
- Data representing a percentage or proportion of a total.
- Metrics with a clear minimum and maximum bound (e.g., 0-100).
- Dashboard tiles requiring immediate visual emphasis on current status.
- Snapshot data or the most recent value from a time series.
- Data where 'completion' or 'progress' is the primary insight.