This section explains how to customize the sparkline with multiple range bands.
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.
@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>
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();
}
}
}
You can define multiple range bands to a sparkline as shown in the following code sample.
@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>
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();
}
}
}