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

Color Ranges


The RadArcGauge and RadCircularGauge enables you to set different fill color depending on the current value. To configure the range colors, define the CollorsCollection of the Gauge Control

<telerik:RadArcGauge runat="server" ID="RadArcGauge1" Font-Size="X-Large">
    <ColorsCollection>
        <telerik:ArcGaugeColor From="0" To="24" Color="Green" />
        <telerik:ArcGaugeColor From="25" To="49" Color="YellowGreen" />
        <telerik:ArcGaugeColor From="50" To="74" Color="Orange" />
        <telerik:ArcGaugeColor From="75" To="100" Color="OrangeRed" />
    </ColorsCollection>
</telerik:RadArcGauge>
  • DefaultVB.aspx
<%@ Page Language="vb"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container no-bg">
            <telerik:RadArcGauge runat="server" ID="RadArcGauge1" Font-Size="X-Large" Width="300">
                <Appearance Margin="20"></Appearance>
                <CenterTemplate>
                    <span style="color: #: color #;">#: value #%</span>
                </CenterTemplate>
                <ColorsCollection>
                    <telerik:ArcGaugeColor From="0" To="24" Color="Green" />
                    <telerik:ArcGaugeColor From="25" To="49" Color="YellowGreen" />
                    <telerik:ArcGaugeColor From="50" To="74" Color="Orange" />
                    <telerik:ArcGaugeColor From="75" To="100" Color="OrangeRed" />
                </ColorsCollection>
            </telerik:RadArcGauge>
        </div>
        <div class="demo-container no-bg">
            <telerik:RadCircularGauge runat="server" ID="RadCircularGauge1" Font-Size="X-Large" Height="300" Width="300">
                <Appearance Margin="20"></Appearance>
                <CenterTemplate>
                   <span style="color: #: color #;">#: value #%</span>
                </CenterTemplate>
                <ColorsCollection>
                    <telerik:ArcGaugeColor From="0" To="24" Color="OrangeRed" />
                    <telerik:ArcGaugeColor From="25" To="49" Color="Orange" />
                    <telerik:ArcGaugeColor From="50" To="74" Color="YellowGreen" />
                    <telerik:ArcGaugeColor From="75" To="100" Color="Green" />
                </ColorsCollection>
            </telerik:RadCircularGauge>
        </div>
        <br />
        <div class="demo-container no-bg fb-size-wide">
            <telerik:RadSlider runat="server" ID="RadSlider3"
                MinimumValue="0" Value="80" MaximumValue="100" ShowDecreaseHandle="false"
                ShowIncreaseHandle="false" OnClientValueChanged="clientValueChanged">
            </telerik:RadSlider>
        </div>
    </div>
    <script>
        function pageLoad() {
            var arcGauge = $find("<%= RadArcGauge1.ClientID %>");
            var circularGauge = $find("<%= RadCircularGauge1.ClientID %>");
            var slider = $find("<%= RadSlider3.ClientID %>");
            arcGauge.set_value(slider.get_value());
            circularGauge.set_value(slider.get_value());
        }

        function clientValueChanged(sender, args) {
            var arcGauge = $find("<%= RadArcGauge1.ClientID %>");
            var circularGauge = $find("<%= RadCircularGauge1.ClientID %>");
            arcGauge.set_value(args.get_newValue());
            circularGauge.set_value(args.get_newValue());
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance