ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Appearance in ASP.NET Core Linear Gauge

29 Jul 2021 / 3 minutes to read

Customizing the Linear Gauge area

The following property and classes are available in the ejs-lineargauge to customize the Linear Gauge area.

tagHelper
Copied to clipboard
@using Syncfusion.EJ2.LinearGauge

<ejs-lineargauge id="linear" Background="skyblue">
    <e-lineargauge-border Color="red" Width="3"></e-lineargauge-border>
    <e-lineargauge-margin Left="20" Top="20" Bottom="20" Right="20"></e-lineargauge-margin>
</ejs-lineargauge>

Linear Gauge with background color and border

Setting up the Linear Gauge title

The title for the Linear Gauge can be set using Title property in ejs-lineargauge. Its appearance can be customized using the TitleStyle with the below properties.

  • Color - Specifies the text color of the title.
  • FontFamily - Specifies font family of the title.
  • FontStyle - Specifies font style of the title.
  • FontWeight - Specifies font weight of the title.
  • Opacity - Specifies the opacity of the title.
  • Size - Specifies the font size of the title.
tagHelper
Copied to clipboard
@using Syncfusion.EJ2.LinearGauge

@{
    var titlestyle = new LinearGaugeTitleStyleLinearGauge
    {
        FontFamily = "Arial",
        FontStyle = "italic",
        FontWeight = "regular",
        Color = "#E27F2D",
        Size ="23px",
        Opacity = 1
    };
}

<ejs-lineargauge id="linear" Title="Linear Gauge" TitleStyle="titlestyle"></ejs-lineargauge>

Linear Gauge with title

Customizing the Linear Gauge container

The area used to render the ranges and pointers at the center position of the gauge is called container. It is of three types namely,

  • Normal
  • Rounded Rectangle
  • Thermometer

The type of the container can be modified by using the Type property in e-lineargauge-container. The container can be customized by using the following properties and class in e-lineargauge-container.

  • Offset - To place the container with the specified distance from the axis of the Linear Gauge.
  • Width - To set the thickness of the container.
  • Height - To set the length of the container.
  • BackgroundColor - To set the background color of the container.
  • Border - To set the color and width for the border of the container.

Normal

The ”Normal” type will render the container as a rectangle and this is the default container type.

tagHelper
Copied to clipboard
@using Syncfusion.EJ2.LinearGauge

<ejs-lineargauge id="linear">
    <e-lineargauge-container Type="Normal" Width="30"></e-lineargauge-container>
    <e-lineargauge-axes>
        <e-lineargauge-axis>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer Type="Bar" Width="15" Value="50"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>

Linear Gauge with normal type container

Rounded Rectangle

The ”RoundedRectangle” type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the RoundedCornerRadius property in LinearGaugeContainer.

tagHelper
Copied to clipboard
@using Syncfusion.EJ2.LinearGauge

<ejs-lineargauge id="linear">
    <e-lineargauge-container Type="RoundedRectangle" Width="30"></e-lineargauge-container>
    <e-lineargauge-axes>
        <e-lineargauge-axis>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer Type="Bar" Width="15" Value="50"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>

Linear Gauge with rounded rectangle type container

Thermometer

The ”Thermometer” type will render the container similar to the appearance of thermometer.

tagHelper
Copied to clipboard
@using Syncfusion.EJ2.LinearGauge

<ejs-lineargauge id="linear">
    <e-lineargauge-container Type="Thermometer" Width="30"></e-lineargauge-container>
    <e-lineargauge-axes>
        <e-lineargauge-axis>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer Type="Bar" Width="15" Value="50"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>

Linear Gauge with thermometer type container

Fitting the Linear Gauge to the control

The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the AllowMargin property in ejs-lineargauge is set as ”false“.

tagHelper
Copied to clipboard
@using Syncfusion.EJ2.LinearGauge

<ejs-lineargauge id="linear" Orientation="Horizontal" Background="skyblue" AllowMargin="false" Height="100%" Width="100%">
    <e-lineargauge-border Width="3" Color="red"></e-lineargauge-border>
    <e-lineargauge-margin Left="0" Right="0" Top="0" Bottom="0"></e-lineargauge-margin>
    <e-lineargauge-axes>
        <e-lineargauge-axis></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>

Linear Gauge with gauge margin

Note: To use this feature, set the AllowMargin property to ”false”, the Width property to ”100%” and the properties of e-lineargauge-margin to ”0“.

Previous
Next