ASP.NET MVC
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Range Band in ASP.NET MVC Sparkline control

This section explains how to customize the sparkline with multiple range bands.

Range band customization

The range band feature is used to highlight a particular range along with the y-axis using the startRange and endRange properties. You can also customize the color and opacity of the range band.

razor
range.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("150px").LineWidth(2).Fill("#0d3c9b").DataSource(ViewBag.sparkData).Render()
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.rangeBandSettings[0] = {
            startRange: 1,
            endRange: 3,
            color: "#bfd4fc",
            opacity: 0.4
        };
        args.sparkline.refresh();
    }
</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()
        {
            ViewBag.sparkData = new int[] { 0, 6, 4, 1, 3, 2, 5 };
            return View();
        }
    }
}

Multiple range band customization

You can define multiple range bands to a sparkline as shown in the following code sample.

razor
multi_range.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("150px").LineWidth(2).Fill("#0d3c9b").DataSource(ViewBag.sparkData).Render()
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.rangeBandSettings[0] = {
            startRange: 1,
            endRange: 3,
            color: "#bfd4fc",
            opacity: 0.4
        };
        args.sparkline.rangeBandSettings[1] = {
            startRange: 4,
            endRange: 5,
            color: 'red',
            opacity: 0.4
        };
        args.sparkline.refresh();
    }
</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()
        {
            ViewBag.sparkData = new int[] { 0, 6, 4, 1, 3, 2, 5 };
            return View();
        }
    }
}
Previous
Next