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

Radial Gauge Pointers

The Pointers of the Telerik UI RadialGauge for ASP.NET MVC are the values that will be marked on the scale. Customize them via the following options:

Pointer

  • The Color (string) parameter controls the color of the pointers. It accepts CSS, HEX and RGB colors.
  • The Length (string) parameter controls the pointers length (in percent) that is based on the distance to the scale. The default length of 1 indicates that the pointer exactly reaches the scale. Accepts values between 0.1 and 1.5.
    @(Html.Kendo().RadialGauge()
        .Name("gauge")
        .Pointers(pointers =>
        {
            pointers.Add().Value(10).Color("#c20000").Length(0.5);
        })
    )

Pointer Cap

  • The Color (string) parameter controls the color of the pointer cap. It accepts CSS, HEX and RGB colors.

  • The Size (double) parameter controls the size of the pointer cap in percentage according to the scale radius. (from 0 to 1). The default size is 0.05.

    @(Html.Kendo().RadialGauge()
            .Name("gauge")
            .Pointers(pointers =>
            {
                pointers.Add().Value(10).Color("#c20000").Length(0.5).Cap(c => c.Size(0.15).Color("red"));
            })
        )   

Multiple Pointers

The RadialGauge supports the usage of multiple pointers simultaneously. They can be declared within the Pointers option of the widget:

    @(Html.Kendo().RadialGauge()
        .Name("gauge")
        .Pointers(pointers =>
        {
            pointers.Add().Value(10).Color("#c20000").Length(0.5).Cap(c => c.Size(0.15));
            pointers.Add().Value(70).Color("#ff7a00").Length(0.75).Cap(c => c.Size(0.1));
            pointers.Add().Value(140).Color("#ffc700");
        })
        .Scale(scale => scale
                .MinorUnit(5)
                .StartAngle(-30)
                .EndAngle(210)
                .Max(180)
        )
    )

See Also

In this article
Not finding the help you need? Improve this article