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