This section explains how to add markers to the sparklines.
To add marker to the sparkline, specify the visible
of markerSettings
as following values. The visible
will accept multiple values too.
The following code example shows enabling markers for all points.
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("350px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).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.markerSettings = {
visible: ['All']
};
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();
}
}
}
In sparkline, markers can be enabled for particular points such as the start, end, low, high, or negative. The following code examples shows enabling markers for the high and low points.
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("350px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).HighPointColor("blue").LowPointColor("red").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.markerSettings = {
visible: ['high', 'Low']
};
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[] { 3, 6, 4, 1, 3, 2, 5 };
return View();
}
}
}
Sparkline markers can be customized in terms of fill color, border color, width, opacity, and size. The following code example shows customizing marker’s fill, border, and size.
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("350px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).Fill("blue").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.markerSettings = {
visible: ['all'],
size: 5,
fill: 'white',
border: { color: 'blue', width: 2 }
};
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[] { 3, 6, 4, 1, 3, 2, 5 };
return View();
}
}
}