# Blazor Linear Gauge Overview

The <a href = "https://www.telerik.com/blazor-ui/linear-gauge" target="_blank">Telerik Linear Gauge for Blazor</a> represents [numerical values](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/pointers) on a [scale](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/scale) of ranges in a linear format.

## Creating Blazor Linear Gauge

1. Add the `<TelerikLinearGauge>` tag.
2. Add an instance of the `<LinearGaugePointer>` to the `<LinearGaugePointers>` collection.
3. Provide a `Value` for the `<LinearGaugePointer>`.

<demo metaUrl="client/lineargauge/overview/example-2/" height="420"></demo>

## Scale

The scale of the Linear Gauge renders the values of the [pointers](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/pointers) and [labels](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/labels). [See the Scale article for more information on how to customize the scale of the component...](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/scale)

## Pointers

The pointers indicate the values on the scale of the component. [See the Pointers article for more information on how to customize the pointers of the component...](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/pointers)

## Labels

The labels are rendered on the scale of the component to give information to the users. [See the Labels article for more information on how to customize the labels on the scale of the component...](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/labels)

## Ranges

The ranges are used to visually distinguish particular values on the scale. [Read the Ranges article for more information...](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/ranges)

## Linear Gauge Parameters

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Parameter     | Type and Default Value          | Description                                                                                                                                                                                                                                                                                                            |
| ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Class`       | `string`                        | A custom CSS class for the `<div class="k-lineargauge">` element.                                                                                                                                                                                                                                                      |
| `Width`       | `string`                        | The width of the Linear Gauge. The [scale](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/scale) width is smaller and [depends on the length of its `Min` and `Max` values](https://www.telerik.com/blazor-ui/documentation/knowledge-base/lineargauge-align-gauges-with-different-min-max). |
| `Height`      | `string`                        | The height of the Linear Gauge.                                                                                                                                                                                                                                                                                        |
| `Transitions` | `bool?`                         | Controls if the Linear Gauge uses animations for its value changes.                                                                                                                                                                                                                                                    |
| `RenderAs`    | `RenderingMode?` <br /> (`SVG`) | Controls if the gauge renders as `SVG` or `Canvas`.                                                                                                                                                                                                                                                                    |

## Linear Gauge Reference and Methods

| Method    | Description                                 |
| --------- | ------------------------------------------- |
| `Refresh` | Programatically re-render the Linear Gauge. |

> caption Get a reference to the Linear Gauge and use the Refresh method

<demo metaUrl="client/lineargauge/overview/get-reference-linear-gauge-1/" height="520"></demo>

## Next Steps

* [Explore the Linear Gauge Scale](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/scale)
* [Learn more about the Linear Gauge Pointers](https://www.telerik.com/blazor-ui/documentation/components/gauges/linear/pointers)

## See Also

* [Live Demo: Linear Gauge](https://demos.telerik.com/blazor-ui/lineargauge/overview)