ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Data labels in ASP.NET MVC Sparkline control

30 Jul 2021 / 2 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.

razor
enable.cs
Copied to clipboard
@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>
Copied to clipboard
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.

razor
custom.cs
Copied to clipboard
@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>
Copied to clipboard
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.

razor
format.cs
Copied to clipboard
@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>
Copied to clipboard
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;
            }
        }
    }
}
Previous
Next