Data labels are used to display values of data points to improve the readability.
To enable data label for sparkline series, provide visible
of the dataLabelSettings
as following possible values:
The following example shows enabling sparkline data label 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)).Fill("blue").DataLabelSettings(data => data.Visible(ViewBag.sparkVisible)).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.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.sparkVisible = new string[]{ "All" };
ViewBag.sparkData = new int[] { 0, 6, 4, 1, 3, 2, 5 };
return View();
}
}
}
Data labels can be customized using the fill, border, opacity, and text Style. The following code example shows customizing data label border, text color, and fill color.
@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").DataLabelSettings(data => data.Fill("blue").Opacity(0.4).Visible(ViewBag.sparkVisible)).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.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.sparkVisible = new string[]{ "All" };
ViewBag.sparkData = new int[] { 0, 6, 4, 1, 3, 2, 5 };
return View();
}
}
}
The text of data labels can be formatted using the format
API in the sparkline dataLabelSettings
. By default, data label shows the y-value of point. The following code example shows how to display x and y-values for points.
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("500px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).DataLabelSettings(data => data.Format("${xval} : ${yval}").Visible(ViewBag.sparkVisible).Fill("blue")).Opacity(0.4).Fill("blue").DataSource(ViewBag.numeric).XName("xval").YName("yval").ValueType(SparklineValueType.Category).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.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.sparkVisible = new string[]{ "All" };
ViewBag.numeric = DataSource.GetNumericData();
return View();
}
public class DataSource
{
public DateTime xDate;
public double yval;
public int x;
public string xval;
public static List<DataSource> GetNumericData()
{
List<DataSource> data3 = new List<DataSource>();
data3.Add(new DataSource() { xval = "Mon", yval = 3});
data3.Add(new DataSource() { xval = "Tue", yval = 5});
data3.Add(new DataSource() { xval = "Wed", yval = 2});
data3.Add(new DataSource() { xval = "Thu", yval = 4});
data3.Add(new DataSource() { xval = "Fri", yval = 6});
return data3;
}
}
}
}