ArcGauge component

This article demonstrates how to use RadzenArcGauge.

Basic usage

Here is basic example that creates an arc gauge with minimal configuration.

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale>
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenArcGaugeScale>
</RadzenArcGauge>

RadzenArcGaugeScale tag is used to add a scale and configure its options - min and max value, start and end angle, tick display etc. RadzenArcGaugeScaleValue tag adds and configures a value of the ArcGaugeScale it is a child of.

Radzen Blazor gauges can have multiple scales and every scale can have multiple pointers or values.

Scale configuration

Min, max and step

By default the Min property of both scale types (Arc and Arc) is set to 0. Max is set to 100 and Step is set to 20.

To override the defaults use the Min, Max and Step properties of the RadzenArcGaugeScale tag.

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale Min="100" Max="1000" Step="100">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenArcGaugeScale>
</RadzenArcGauge>

Tick configuration

By default the RadzenArcGaugeScale does not display ticks. You need to set the TickPosition property to GaugeTickPosition.Outside or GaugeTickPosition.Inside. To hide the ticks altogether use GaugeTickPosition.None.

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale TickPosition="GaugeTickPosition.Outside">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenArcGaugeScale>
</RadzenArcGauge>

Minor ticks are not displayed by default. To display them set the MinorStep property to a value greater than 0.

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale TickPosition="GaugeTickPosition.Outside" MinorStep="5">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenArcGaugeScale>
</RadzenArcGauge>

Change the start and and angles

By default the StartAngle property of the gauge scales is set to -90 and EndAngle is set to 90. This makes the default shape half a circle. Here is how to create a gauge which is a full circle:

<RadzenArcGauge>
  <RadzenArcGaugeScale StartAngle="0" EndAngle="360">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenArcGaugeScale>
</RadzenArcGauge>

Format the values

The scale ticks labels displays values with default formatting (ToString()). This can be customized in two ways - via the FormatString or the Formatter properties.

FormatString supports the standard .NET Number formats.

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale FormatString="{0:C}">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenGaugeGaugeScale>
</RadzenGaugeGauge>

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale Formatter=@(value => value.ToString())>
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenGaugeGaugeScale>
</RadzenGaugeGauge>

Change the scale position

You can use the X and Y property of the scales to change the position of their center. Both properties have a default value of 0.5 which means that by default the center of a scale is the middle of the gauge. X and Y are a multiplier of the width and height.

For example you can move the center of the scale to the bottom of the component by setting Y to 1.

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale Y="1">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenGaugeGaugeScale>
</RadzenGaugeGauge>

Using X and Y is also useful when you have multiple scales - this allows you to prevent them from overlapping which they will do by default.

Change the scale radius

By default the radius is set to be half the size of the Gauge - the smaller of its pixel width or height. You can tweak that by setting the Radius property. It is also a multiplier - the value you specify is multiplied by the initial value (half the width or height depending on which is smaller). The reason Radius is a multiplier and not an absolute value is responsiveness - users of smaller devices would expect to see a scale which is proportionally the same.

Here is how to make a scale twice as small

<RadzenArcGauge Style="width: 300px; height: 300px">
  <RadzenArcGaugeScale Radius="0.5">
    <RadzenArcGaugeScaleValue Value="50" />
  </RadzenGaugeGaugeScale>
</RadzenGaugeGauge>

Value configuration

Hide the value

By default the Value property is displayed below the scale. You can hide it by setting the ShowValue property to false.

<RadzenArcGauge>
  <RadzenArcGaugeScale>
    <RadzenArcGaugeScaleValue Value="50" ShowValue="false" />
  </RadzenArcGaugeScale>
</RadzenArcGauge>

Customize the value display

Use the Template property of the pointer to tweak the default value appearance.

<RadzenArcGauge>
  <RadzenArcGaugeScale Min="0" Max="260">
    <RadzenArcGaugeScaleValue Value=@value>
      <Template Context="value">
        <h4>
            @value.Value <sup>km/h</sup>
        </h4>
      </Template>
    </RadzenArcGaugeScaleValue>
  </RadzenArcGaugeScale>
</RadzenArcGauge>