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.

razor
ranges.cs
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Render()
<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.

razor
range-customization.cs
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Render()
<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.

razor
multiple-ranges.cs
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Render()
<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();
        }
    }
}