Charts - Gauge Examples

#Usage

import { ChartAnnotation, ChartPie, ChartSvg, ChartTooltip } from '@primeui/vue-chart';

<ChartSvg>
    <ChartPie :data="zones" category-field="zone" value-field="value" :inner-radius="0.66" :start-angle="-180" :sweep-angle="180" />
    <ChartAnnotation :render="renderNeedle" />
    <ChartTooltip />
</ChartSvg>

Use gauges for bounded status values with meaningful bands. Keep the zone thresholds visible in labels or tooltip copy so the color scale is not the only explanation.

#GB Grid Carbon Intensity

startAngle=-180 and sweepAngle=180 shape a half-circle gauge where each color zone splits into a filled portion up to the current reading and a dimmed remainder, encoding both thresholds and position in one ring without stacking. ChartAnnotation draws a needle at the exact current-value angle and renders the reading, zone badge, and trend inside the hole. Hover a zone segment to switch the center display to that zone's range and description.

#Atmospheric CO₂ Concentration: Mauna Loa

startAngle=225 and sweepAngle=270 span the arc from a safe baseline to a critical ceiling, split into three color zones with a trailing empty segment for headroom above the current reading. ChartAnnotation shows the current reading and year-over-year delta inside the hole. Hover any zone band to switch the center to that zone's range and status.

#NASA Global Temperature Anomaly

startAngle=-180 and sweepAngle=180 shape a half-circle with three color zones encoding safe, warning, and headroom bands in a single ChartPie ring. ChartAnnotation draws a dashed reference line at the Paris Agreement target angle, while ChartTooltip explains each band on hover.

#Related Docs

• Pie & Donut Overview
• Donut Examples