New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Radial Gauge

  • Demo Configurator
  • Main background color
    Pick Color(Current Color is blank)

The Radial Gauge is one of the flavours that are available in the RadGauge control family. It represents the value on a circular scale much like car speed dial.

The specific properties that make it different are related to the pointer and rotation angles - the pointer is an arrow and its size is a percentage of the gauge size while the entire scale can be rotated as specified by the StartAngle and EndAngle properties.

This demo shows the basics of the Radial Gauge control. Examining the code will show the basic markup - tags and properties, the code-behind logic will show the code structure.

Setting a value that is outside of the range will result in either a min or max value being set, if you disregard the instructions in the value textbox before clicking the configure button. The pointer's Cap size is a percentage value from the entire gauge control where 1 is the entire gauge and 0 means no pointer.

New: As of R1 2022 you can also control the width of the range placeholder via the RangeSize property.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Gauge.Types.LinearGauge.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <telerik:AjaxUpdatedControl ControlID="RadRadialGauge1" LoadingPanelID="RadAjaxLoadingPanelConfiguration" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
    <div class="demo-container size-thin">
        <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Width="300px" Height="300px">
            <Pointer Value="2.2">
                <Cap Size="0.1" />
            <Scale Min="0" Max="6" MajorUnit="1" RangeSize="5">
                <Labels Format="{0} bar" />
                    <telerik:GaugeRange Color="#8dcb2a" From="1.5" To="2.5" />
                    <telerik:GaugeRange Color="#ffc700" From="2.5" To="3.5" />
                    <telerik:GaugeRange Color="#ff7a00" From="3.5" To="4.5" />
                    <telerik:GaugeRange Color="#c20000" From="4.5" To="6" />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanelConfiguration">
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                            <qsf:DropDownList Label="Labels position" runat="server" ID="LabelsPositionComboBox" AutoPostBack="true" Size="Medium">
                                    <telerik:DropDownListItem Text="Inside" Value="Inside" Selected="true" />
                                    <telerik:DropDownListItem Value="Outside" Text="Outside" />
                            <qsf:NumericTextBox Label="Pointer size" runat="server" Size="Narrow" AutoPostBack="true" ID="PointerCapSizeNumericBox" AllowOutOfRangeAutoCorrect="true"
                                MaxValue="1" MinValue="0" ShowSpinButtons="true" Value="0.1">
                                <IncrementSettings Step="0.05" />
                            <qsf:NumericTextBox Label="Set value between 0 and 6" Value="2.2" runat="server" Size="Narrow" AutoPostBack="true" ID="NewValueNumericBox" AllowOutOfRangeAutoCorrect="true"></qsf:NumericTextBox>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                            <qsf:NumericTextBox Label="Scale Range size" runat="server" Size="Medium" AutoPostBack="true" ID="NumericTextBox3" AllowOutOfRangeAutoCorrect="true"
                                MaxValue="50" MinValue="5" ShowSpinButtons="true" Value="5">
                                <IncrementSettings Step="5" />
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                            <qsf:ColorPicker Label="Main background color" runat="server" AutoPostBack="true" ID="MainBackgroundColorPicker" ShowIcon="true">
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="IsReversedCheckBox" Text="Is Reversed (changes values position)" AutoPostBack="true"></asp:CheckBox>

Support & Learning Resources

Find Assistance