Search results

Appearance

Linear Gauge orientation

You can change the orientation of the linear gauge using Orientation property.

Two types of orientations are available:

  • Horizontal
  • Vertical
@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Orientation="Orientation.Horizontal">
</EjsLinearGauge>

Linear gauge with horizontal orientation

Area customization

Using the Background property and the LinearGaugeBorder tag, you can change the background color and border style of the Linear Gauge.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Width ="200" Height ="400" Background= "skyblue">
    <LinearGaugeBorder Color="#FF0000" Width="2">
    </LinearGaugeBorder>
</EjsLinearGauge>

Linear Gauge with Background Sample

Title customization

You can give the title using Title property to show the information about the Linear Gauge. Its appearance can be customized by using the LinearGaugeTitleStyle tag.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Title="linear gauge">
    <LinearGaugeTitleStyle FontFamily="Arial" FontStyle="Italic"
    FontWeight="Regular" Color="#E27F2D" Size="23px"></LinearGaugeTitleStyle>
</EjsLinearGauge>

Linear Gauge with Title Sample

Container customization

The area used to render the ranges and pointers at the center position of the gauge is called Container. It can be customized using the following properties.

Types of container

The following three types of containers are available in Linear Gauge:

  • Normal
  • Rounded rectangle
  • Thermometer

Normal

The normal type will render the container as rectangle, and this is the default container type.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeContainer Width="30">
    </LinearGaugeContainer>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="50" Width="15" Type="Point.Bar">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Container

Rounded rectangle

The rounded rectangle type will render the container as rectangle with rounded corners.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeContainer Width="30" Type="ContainerType.RoundedRectangle">
    </LinearGaugeContainer>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="50" Width="15" Type="Point.Bar">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Rounded Rectangle Container

Thermometer

This type is used to render the container similar to the appearance of thermometer.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeContainer Width="30" Type="ContainerType.Thermometer">
    </LinearGaugeContainer>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="80" Width="15" Type="Point.Bar">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Thermometer container