New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Linear Gauge Pointers
The Pointers of the Telerik UI LinearGauge for ASP.NET Core are the values that will be marked on the scale. Customize them via the following options:
Shape
The Shape parameter controls the shape of the pointer and takes a member of the GaugeLinearPointerShape enum:
-
BarIndicator- by default a bar indication will be rendered as the pointer shape -
Arrow
Razor
@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer => pointer
.Value(65)
.Shape(GaugeLinearPointerShape.Arrow)
)
)Color
The Color (string) parameter controls the color of the pointers. It accepts CSS, HEX and RGB colors.
Razor
@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer =>
{
pointer
.Value(10)
.Color("red")
.Shape(GaugeLinearPointerShape.Arrow);
pointer
.Value(20)
.Color("#008000")
.Shape(GaugeLinearPointerShape.Arrow);
pointer
.Value(30)
.Color("rgb(255,255,0)")
.Shape(GaugeLinearPointerShape.Arrow);
})
)Opacity
The Opacity (double) parameter controls the opacity of the pointers. The value passed to it should be between 0 and 1.
Razor
@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer =>
{
pointer
.Value(10)
.Color("red")
.Opacity(0.5)
.Shape(GaugeLinearPointerShape.Arrow);
})
)Size
The Size (double) parameter controls the size of the pointers.
Razor
@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer =>
{
pointer
.Value(10)
.Size(15)
.Shape(GaugeLinearPointerShape.Arrow);
})
)Margin
The Margin (double) parameter controls the margin between the Scale and the pointers.
Razor
@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer =>
{
pointer
.Value(10)
.Margin(5)
.Shape(GaugeLinearPointerShape.Arrow);
})
)