Gauge Chart

Radial gauge for KPI dashboards with color thresholds.

Basic Usage

<HelixGaugeChart Value="73" Min="0" Max="100"
                 Label="CPU Usage" Width="200" Height="160" />

With Thresholds

var thresholds = new List<GaugeThreshold>
{
    new() { Value = 0, Color = "var(--arcadia-color-success)" },
    new() { Value = 60, Color = "var(--arcadia-color-warning)" },
    new() { Value = 85, Color = "var(--arcadia-color-danger)" },
};

Parameters

ParameterTypeDefaultDescription
ValuedoubleCurrent gauge value
Mindouble0Minimum range
Maxdouble100Maximum range
Labelstring?nullLabel below value
ThresholdsList<GaugeThreshold>?nullColor thresholds
FullCircleboolfalseFull 360° or semi-circle
StrokeWidthdouble20Arc thickness
ValueFormatStringstring?nullFormat for center value