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

• Color

• Opacity

• Size

• Margin

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)
          )
    )

    <kendo-lineargauge name="gauge">
        <lineargauge-pointers>
            <pointer value="65" shape="GaugeLinearPointerShape.Arrow"></pointer>
        </lineargauge-pointers>
    </kendo-lineargauge>

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);
          })
    )

    <kendo-lineargauge name="gauge">
        <lineargauge-pointers>
            <pointer value="10" color="red" shape="GaugeLinearPointerShape.Arrow"></pointer>
            <pointer value="20" color="#008000" shape="GaugeLinearPointerShape.Arrow"></pointer>
            <pointer value="30" color="rgb(255,255,0)" shape="GaugeLinearPointerShape.Arrow"></pointer>
        </lineargauge-pointers>
    </kendo-lineargauge>

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);
          })
    )

    <kendo-lineargauge name="gauge">
        <lineargauge-pointers>
            <pointer value="10" color="red" shape="GaugeLinearPointerShape.Arrow" opacity="0.5"></pointer>
        </lineargauge-pointers>
    </kendo-lineargauge>

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);
          })
    )

    <kendo-lineargauge name="gauge">
        <lineargauge-pointers>
            <pointer value="10" size="15" shape="GaugeLinearPointerShape.Arrow"></pointer>
        </lineargauge-pointers>
    </kendo-lineargauge>

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);
          })
    )

    <kendo-lineargauge name="gauge">
        <lineargauge-pointers>
            <pointer value="10" margin="5" shape="GaugeLinearPointerShape.Arrow"></pointer>
        </lineargauge-pointers>
    </kendo-lineargauge>

See Also

• Overview of the LinearGauge
• Pointers of the LinearGauge