ASP.NET Core
Demos
Support
Forum
Download
Search results

Ranges

You can categories certain interval on gauge axis using ranges property.

Start and End

Start and end value of a range in an axis can be customized by using start and end properties.

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

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Customization

Color and thickness of the range can be customized by using color,startWidth and endWidth property.

tagHelper
customization.cs
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload"></ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 40,
            end: 80,
            endWidth: 15,
            startWidth: 15,
            color: '#ff5985'
        }]
    }
</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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Radius

You can place the range inside or outside of the axis by using radius property. The radius of the range can takes value either in percentage or in pixels. By default, ranges take 100% of the axis radius.

In Pixel

You can set the radius of the range in pixel as demonstrated below,

tagHelper
radius.cs
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload">
        <e-circulargauge-axes>
            <e-circulargauge-axis minimum="0" maximum="100"></e-circulargauge-axis>
        </e-circulargauge-axes>
</ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 40,
            end: 80,
            radius: '100'
        }]
    }
</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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

In Percentage

By setting value in percentage, range gets its dimension with respect to its axis radius. For example, when the radius is ‘50%’, range renders to half of the axis radius.

tagHelper
radius-percentage.cs
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload">
        <e-circulargauge-axes>
            <e-circulargauge-axis minimum="0" maximum="100"></e-circulargauge-axis>
        </e-circulargauge-axes>
</ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 40,
            end: 80,
            radius: '50%'
        }]
    }
</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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Multiple Ranges

You can add multiple ranges to an axis with the above customization as demonstrated below.

Note: You can set the range color to axis ticks and labels by enabling useRangeColor property in majorTicks, minorTicks and labelStyle object.

tagHelper
multiple-ranges.cs
@{ 
    var majorticks = new
    {
        useRangeColor = true
    };
    var minorticks = new
    {
        useRangeColor = true
    };
    var labelstyle = new
    {
        useRangeColor = true
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload">
        <e-circulargauge-axes>
            <e-circulargauge-axis minimum="0" maximum="100" majorTicks="majorticks" minorTicks="minorticks" labelStyle="labelstyle"></e-circulargauge-axis>
        </e-circulargauge-axes>
</ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 0,
            end: 25,
            radius: '108%'
        }, {
            start: 25,
            end: 50,
            radius: '70%'
        }, {
            start: 50,
            end: 75,
            radius: '70%'
        }, {
            start: 75,
            end: 100,
            radius: '108%'
        }]
    }
</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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Rounded corner radius

You can customize the corner radius using the roundedCornerRadius property in ranges.

tagHelper
ranges.cs
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload"></ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{start:40, end:80, roundedCornerRadius:6 }]
            }
</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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
Previous
Next