Appearance in ASP.NET Core Linear Gauge control

08 Apr 2021 / 2 minutes to read

Gauge Area Customization

Customize the Linear Gauge background

Using background and border properties, you can change the background color and border of the linear gauge.

tagHelper

gauge-background.cs

@{ 
    var border = new LinearGaugeBorder
    {
        Color = "#FF0000",
        Width = 2
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" background="skyblue" border="border"></ejs-lineargauge>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Gauge Margin

You can set margin for the lineargauge through margin property.

tagHelper

gauge-margin.cs

@{
    var margin = new LinearGaugeMargin
    {
        Left = 40,
        Right = 40,
        Top = 40,
        Bottom = 40
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" margin="margin"></ejs-lineargauge>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Gauge Title

You can give the title using title property to show the information about the linear gauge. Its appearance can be customized by using the titleStyle property.

tagHelper

gauge-title.cs

@{
    var titlestyle = new LinearGaugeTitleStyleLinearGauge
    {
        FontFamily = "Arial",
        FontStyle = "italic",
        FontWeight = "regular",
        Color = "#E27F2D",
        Size ="23px"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" title="linear gauge" titleStyle="titlestyle"></ejs-lineargauge>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Gauge Container

The area used to render the ranges and pointers at the center position of the gauge is called container. It can be customized by using type, offset, width, height and backgroundColor properties in container. It is of three types namely,

Normal
Rounded Rectangle
Thermometer

Normal

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

tagHelper

gauge-container.cs

@{ 
    var tooltip = new LinearGaugeTooltipSettings
    {
        Enable = true
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" tooltip="tooltip"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 80
        }]
    }
</script>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Rounded Rectangle

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

tagHelper

rounded-rectangle.cs

@{
    var container = new LinearGaugeContainer
    {
        Height = 300,
        Width = 30,
        Type= ContainerType.RoundedRectangle
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" container="container"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers= [{
            value: 50,
            width: 15,
            type: 'Bar'
        }]
    }
</script>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Thermometer

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

tagHelper

thermo-meter.cs

@{
    var container = new LinearGaugeContainer
    {
        Height = 300,
        Width = 30,
        Type= ContainerType.Thermometer
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" container="container"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers= [{
            value: 50,
            width: 15,
            type: 'Bar'
        }]
    }
</script>

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Contents

Gauge Area Customization
Gauge Title
Gauge Container

Contents

Gauge Area Customization
Gauge Title
Gauge Container