Gauge chart
info
Charts are available with Avalonia Pro.
Gauge charts render a single value on a dial-style arc, with optional needle and formatted value text.
When to use
- Operational dashboards: Show utilization, load, or health in a compact dial.
- Threshold monitoring: Emphasize a single current reading over time history.
- Status cards: Present one metric with strong visual weight.
Code example
XAML
<charts:GaugeChart Title="CPU load"
Width="220"
Height="160"
Value="{Binding CpuLoad}"
MaxValue="100"
ShowNeedle="True" />
Data model (C#)
public double CpuLoad { get; set; } = 67;
Common properties
| Property | Description | Default |
|---|---|---|
Value | Current value displayed by the gauge. | 50.0 |
MinValue | Minimum value of the scale. | 0.0 |
MaxValue | Maximum value of the scale. | 100.0 |
ValueBrush | Brush used for the value arc. | null |
TrackBrush | Brush used for the background track. | null |
NeedleBrush | Brush used for the needle. | null |
ShowNeedle | Whether to draw the needle. | true |
StartAngle | Start angle of the gauge arc in degrees. | 135.0 |
SweepAngle | Sweep angle of the gauge arc in degrees. | 270.0 |
TrackThickness | Thickness of the track arc. | 20.0 |
ShowValue | Whether to display the formatted value text. | true |
ValueFormat | Format string used for the value text. | "{0:F0}" |