LinearGauge Overview

Telerik UI for ASP.NET Core Ninja image

The LinearGauge is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI LinearGauge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI LinearGauge widget.

The LinearGauge represents values on a linear scale.

Initializing the LinearGauge

The following example demonstrates how to initialize the LinearGauge.

        .Name("linearGauge") // The name of the LinearGauge is mandatory. It specifies the "id" attribute of the widget.
        .Scale(scale => scale
            .Min(0) // Set the min value of the LinearGauge.
            .Max(200) // Set the min value of the LinearGauge.
        .Pointer(pointer => pointer
            .Value(10) // Set the value of the LinearGauge.
    <kendo-lineargauge name="gauge"></kendo-lineargauge>

Basic Configuration

The LinearGauge configuration options are passed as attributes.

          .Pointer(pointer => pointer.Value(10))
          .Scale(scale => scale
              .Ranges(ranges =>
    <kendo-lineargauge name="gauge">
            <pointer value="10"></pointer>
        <scale major-unit="20" minor-unit="2" min="-40" max="60">
                <range color="#2798df" from="-40" to="-20">
                <range color="#ffc700" from="30" to="45">
                <range color="#c20000" from="45" to="60">

Referencing Existing Instances

To reference an existing Telerik UI LinearGauge instance, use the configuration option. Once a reference is established, use the LinearGauge client-side API to control its behavior.

    // Place the following after the LinearGauge for ASP.NET Core declaration.
    $(function() {
    // The Name() of the LinearGauge is used to get its client-side instance.
        var gauge = $("#linearGauge").data("kendoLinearGauge");

See Also

In this article