New to Telerik UI for ASP.NET Core? Download 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

    @(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.

    @(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.

    @(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.

    @(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.

    @(Html.Kendo().LinearGauge()
          .Name("gauge")
          .Pointer(pointer =>
          {
              pointer
                  .Value(10)
                  .Margin(5)
                  .Shape(GaugeLinearPointerShape.Arrow);
          })
    )

See Also

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