Data Labels

17 Feb 20228 minutes to read

Data labels are used to display values of data points to improve the readability.

Enable data label

To enable data label for sparkline series, provide visible of the dataLabelSettings as following possible values:

• All - Enables data label of all points.
• Start - Enables data label of the start point.
• End - Enables data label of the end point.
• High - Enables data label of the high point.
• Low - Enables data label of the low point.
• Negative - Enables data labels of the negative points.

The following example shows enabling sparkline data label for all points.

CSHTML

@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>

Enable.cs

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();
        }
    }
}

Customize data label

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.

CSHTML

@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>

Custom.cs

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();
        }
    }
}

Format data label text

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.

CSHTML

@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>

Format.cs

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;
            }
        }
    }
}