New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Linear Gauge Pointers
Updated over 6 months ago
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);
})
)