New to Telerik UI for ASP.NET MVC? Start a 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.
Razor
@(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.
Razor
@(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:
Razor
@(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)
)
)