The C1RadialGaugeExtender control includes several properties that allow you to style every aspect of the gauge, including the face, pointer, tick marks, and labels. In this topic you'll style the gauge using these properties and also a face template.

Complete the following steps:

1. Create a new ASP.NET Web application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gauge" TagPrefix="Gauge" %>

Note that you may need to edit the above depending on the assembly you are using.

4. And add the following markup within the main <div> tag to add a Panel with content and set the linear gauge extender:

<asp:Panel ID="radialGauge" runat="server" CssClass="ui-widget ui-widget-content ui-corner-all">

</asp:Panel>

<Gauge:C1RadialGaugeExtender runat="server" ID="RadialGaugeExtender1" TargetControlID="radialGauge" Value="468" Max="1200" StartAngle="270" Width="500" Height="500" SweepAngle="240">

    <Labels Offset="-5">

        <LabelStyle FontSize="15pt" FontWeight="800" Fill-Color="#000"></LabelStyle>

    </Labels>

    <Pointer Width="16" Length="0.95">

        <PointerStyle>

        <Fill LinearGradientAngle="340" ColorBegin="#FB7800" ColorEnd="#C00100" Type="LinearGradient"></Fill>

        </PointerStyle>

    </Pointer>

    <Cap>

        <PointerCapStyle>

        <Fill Color="#C00100"></Fill>

        </PointerCapStyle>

    </Cap>

    <TickMajor Factor="8" Offset="0" Interval="100" Position="Inside" >

        <TickStyle Height="4">

        <Fill Color="#333333"></Fill>

        </TickStyle>

    </TickMajor>

    <TickMinor Factor="3" Visible="true" Offset="10" Interval="25" Position="Inside">

        <TickStyle Height="1">

        <Fill Color="#333333"></Fill>

        </TickStyle>

    </TickMinor>

    <Face Template="face"></Face>

    <Ranges>

        <Gauge:GaugelRange StartWidth="73" EndWidth="73" StartValue="1000" EndValue="1200" StartDistance="0.575" EndDistance="0.575">

        <RangeStyle>

            <Fill LinearGradientAngle="40" ColorBegin="#FB7800" ColorEnd="#C00100" Type="LinearGradient"></Fill>

        </RangeStyle>

        </Gauge:GaugelRange>

        <Gauge:GaugelRange StartWidth="10" EndWidth="1" StartValue="625" EndValue="1175" StartDistance="0.75" EndDistance="0.8">

        <RangeStyle>

            <Fill Color="#333333"></Fill>

        </RangeStyle>

        </Gauge:GaugelRange>

    </Ranges>

</Gauge:C1RadialGaugeExtender>

This will add a styled gauge to the page.

5. And add the following markup just below the gauge markup to add a face template:

<script type="text/javascript">

    function face(ui) {

        var set = ui.canvas.set();

        var circle = ui.canvas.circle(ui.origin.x, ui.origin.y, ui.r);

        circle.attr({ "stroke": "#474747", "stroke-width": 3, fill: "#fff" });

        set.push(circle);

        var circle2 = ui.canvas.circle(ui.origin.x, ui.origin.y, 100);

        circle2.attr({ fill: "#060606" });

        set.push(circle2);

        return set;

    }

</script>

What You've Accomplished

Press F5 to run your application,  notice that the gauge displayed is styled to appear like a speedometer. Stop the application and edit the style properties to change the appearance of the gauge.