ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Range Band in ASP.NET Core Sparkline control

30 Jul 2021 / 1 minute to read

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.

tagHelper
range.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded"  height="150px" width="150px" lineWidth= 2 dataSource="ViewBag.sparkData"  >
	 <e-sparkline-rangebandsettings startRange="1" endRange="3" color="#bfd4fc" opacity=0.4></e-sparkline-rangebandsettings>
	</ejs-sparkline>
</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.refresh();
    }
</script>
Copied to clipboard
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.

tagHelper
multi_range.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="150px" lineWidth= 2 dataSource="ViewBag.sparkData"  >
	 <e-sparkline-rangebandsettings>
        <e-sparkline-rangebandsetting startRange="1" endRange="3" color="#bfd4fc" opacity=0.4></e-sparkline-rangebandsetting>
        <e-sparkline-rangebandsetting startRange="4" endRange="5" color="red" opacity=0.4></e-sparkline-rangebandsetting>
     </e-sparkline-rangebandsettings>
	</ejs-sparkline>
</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.refresh();
    }
</script>
Copied to clipboard
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