Search results

Range Band

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();
        }
    }
}