Customize the Linear Gauge background
Using background
and
border
properties, you can change the background color and border of the linear gauge.
@{
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.
@{
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();
}
}
}
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.
@{
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();
}
}
}
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
The normal type will render the container as rectangle and this is the default container type.
@{
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.
@{
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.
@{
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();
}
}
}