Customize the Linear Gauge background
Using background
and
border
properties, you can change the background color and border of the linear gauge.
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Background("skyblue").Border(new
{
color = "#FF0000",
width = 2
}).Render()
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.
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Margin(new
{
left = 40,
right = 40,
top = 40,
bottom = 40
}).Render()
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.
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Title("linear gauge").TitleStyle(new
{
fontFamily = "Arial",
fontStyle = "italic",
fontWeight = "regular",
color = "#E27F2D",
size = "23px"
}).Render()
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 container = new
{
height = 300,
width = 30
};
}
@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();
}
}
}
Rounded Rectangle
The rounded rectangle type will render the container as rectangle with rounded corners.
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Container(new
{
height = 300,
width = 30,
type = "RoundedRectangle"
}).Render()
<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.
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Container(new
{
height = 300,
width = 30,
type = "Thermometer"
}).Render()
<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();
}
}
}