User interactions

17 Feb 202215 minutes to read

Sparkline has two user interaction features: tooltip and tracker line.

Tooltip

The sparkline provides options to display details about values of data points through tooltips when hovering the mouse over data point. To use tooltip in sparkline, inject the SparklineTooltip module to sparkline using the inject method.

The following code example shows enabling tooltip for sparkline with format.

@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded"  height="200px" width="500px" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Category"  dataSource="ViewBag.data" xName="xval" yName="yval" >
	<e-sparkline-tooltipsettings visible="true" format="${xval} : ${yval}%"></e-sparkline-tooltipsettings>
	<e-sparkline-axissettings minX="-1" maxX="7" maxY="7" minY="-1" ></e-sparkline-axissettings>
	</ejs-sparkline>
</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.data = DataSource.GetData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetData()
            {
                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;
            }
        }
    }
}

Tooltip customization

The fill color, text styles, format, and border of the tooltip can be customized. The following code example shows customization of tooltip’s fill color and text style.

@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded"  height="200px" width="500px" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Category"  dataSource="ViewBag.data" xName="xval" yName="yval" >
	<e-sparkline-tooltipsettings visible="true" format="${xval} : ${yval}%"  fill= '#033e96'></e-sparkline-tooltipsettings>
	<e-sparkline-axissettings minX="-1" maxX="7" maxY="7" minY="-1" ></e-sparkline-axissettings>
	</ejs-sparkline>
</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.data = DataSource.GetData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetData()
            {
                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;
            }
        }
    }
}

Tooltip template

Sparkline tooltip has template support. By using tooltip template, you can customize tooltips. The following code example shows more customization options provided to sparktooltip class that is used in tooltip template div. Using this template, images also can be added to tooltip.

@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded"  height="200px" width="500px" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Category"  dataSource="ViewBag.data" xName="xval" yName="yval" >
	<e-sparkline-tooltipsettings visible="true" template= '<div style="border-radius: 5px; background: #008cff;color: #FFFFFF !important;font-size: 16px;font-style: italic;padding: 8px;">${xval} : ${yval}<div>' >
	<e-sparkline-axissettings minX="-1" maxX="7" maxY="7" minY="-1" ></e-sparkline-axissettings>
	</ejs-sparkline>
</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.data = DataSource.GetData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetData()
            {
                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;
            }
        }
    }
}

Track line

The track line tracks data points that are closer to the mouse position or touch contact.

To enable track lines for sparkline, specify the visible option of trackLineSettings to true. Based on theme, tracker color will be changed. The default value of tracker color is black.

To use track line in sparkline, inject the SparklineTooltip module to sparkline using the inject method.

@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded"  height="200px" width="500px" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Category"  dataSource="ViewBag.sparkData" xName="xval" yName="yval" >
	<e-sparkline-tooltipsettings visible="true" format="${xval} : ${yval}%"></e-sparkline-tooltipsettings>
	<e-sparklinetooltipsettings-tracklinesettings visible="true" color="#033e96" width="1" ></e-sparklinetooltipsettings-tracklinesettings>
	<e-sparkline-axissettings minX="-1" maxX="7" maxY="7" minY="-1" ></e-sparkline-axissettings>
	</ejs-sparkline>
</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.sparkData = new int[] { 5, 3, 4, 6, 8, 7, 9, 1, 3, 5, 3, 4, 6, 8, 7, 9, 1, 3, 5, 2, 4, 6, 7, 9, 5, 8, 3, 6, 1, 7, 4, 2, 5, 2, 4, 6, 7, 9, 5, 8, 3, 6, 1, 7, 4, 2 };
            return View();
        }
    }
}