Charts - Gauge Playground

Interactive playground for gauge charts to experiment with props and configuration live.

#Usage

import { ChartGauge, ChartHover, ChartSvg, ChartTooltip, ChartXAxis } from '@primeui/vue-chart';
<ChartSvg>
    <ChartGauge :data="data" value-x-field="value" :min="0" :max="240" />
    <ChartXAxis :tick-interval="40" />
    <ChartTooltip />
</ChartSvg>

Use the playground to compare the domain, the arc angles, needle and bar settings, segment splits, and tick-ring options. Drag value past min or max to see how overshoot and wrap handle out-of-range readings. The gauge chases a new reading over the default animation duration of 1000ms, so dragging the slider trails the handle; shorten it with animation on the chart root.

#Playground

Loading Demo...