Search results

Ranges

You can categorize the axis values using start and end property in the ranges. You can add any number of range for an axis by using array of range objects.

tagHelper
ranges.cs
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear" load="gaugeLoad"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges=[{ start: 50, end: 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();
        }
    }
}

Ranges Customization

Ranges can be customized by using startWidth, endWidth and color properties in the range object.

tagHelper
range-customization.cs
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear" load="gaugeLoad"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 50,
            end: 80,
            startWidth: 10,
            endWidth: 20,
            color: 'red'
        }]
    }
</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();
        }
    }
}

Multiple Ranges

You can add multiple ranges to an axis as demonstrated below.

tagHelper
multiple-ranges.cs
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear" load="gaugeLoad"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 0,
            end: 30,
            startWidth: 10,
            endWidth: 10,
            color: '#41f47f'
        },
        {
            start: 30,
            end: 50,
            startWidth: 10,
            endWidth: 10,
            color: '#f49441'
        }, {
            start: 50,
            end: 100,
            startWidth: 10,
            endWidth: 10,
            color: '#cd41f4'
        }]
    }
</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();
        }
    }
}