User interactions in Sparkline

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

The Sparkline displays additional information via a tooltip when the mouse hovers over it. Enable the tooltip by adding the <e-sparkline-tooltipsettings> child element to the <ejs-sparkline> tag helper and setting its visible attribute to true.

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

CSHTML
Tooltip.cs
@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;
            }
        }
    }
}

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.

CSHTML
Tooltip-custom.cs
@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;
            }
        }
    }
}

The tooltip content can be formatted directly within the [format] property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.

A format specifier can be applied to a tooltip token by adding a colon (:) followed by the required format.

For example:

<e-sparkline-tooltipsettings enable="true" format="${x:MMM yyyy} : ${y:n2}"></e-sparkline-tooltipsettings>

In the above example, x is displayed in month-year format and y is displayed with two decimal places.

Inline formatting can be applied to the following tooltip tokens:

${x} or ${x:MMM yyyy} – Specifies the x-value of the Sparkline data point, such as DateTime or category values.
${y} or ${y:n2} – Specifies the numeric y-value of the Sparkline data point.

Important: DateTime formatting is applied when the resolved value is a Date object, and number formatting is applied when the resolved value is numeric.

The following format types are supported:

DateTime formats such as MMM yyyy, MM:yy, and dd MMM
Number formats such as:
- n2 – number with two decimal places
- n0 – number without decimals
- c2 – currency format
- p1 – percentage format

If the specified format does not match the resolved value type, the original value is displayed.

CSHTML
Inline-format.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded"  height="200px" width="500px" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.DateTime"  dataSource="ViewBag.data" xName="xval" yName="yval" >
	<e-sparkline-tooltipsettings visible="true" format= "${xval:MMM yyyy} : ${yval:n2}"></e-sparkline-tooltipsettings>
	<e-sparkline-axissettings minY="-1" maxY="8"></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>
public ActionResult Index()
{
    ViewBag.data = new List<DataSource>
    {
        new DataSource { xval = new DateTime(2024, 01, 01), yval = 3 },
        new DataSource { xval = new DateTime(2024, 01, 02), yval = 5 },
        new DataSource { xval = new DateTime(2024, 02, 01), yval = 2 },
        new DataSource { xval = new DateTime(2024, 03, 01), yval = 4 },
        new DataSource { xval = new DateTime(2024, 04, 01), yval = 6 }
    };

    return View();
}

public class DataSource
{
    public DateTime xval { get; set; }
    public double yval { get; set; }
}

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

CSHTML
Tooltip_template.cs
@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.

CSHTML
Tooltip_trackline.cs
@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();
        }
    }
}

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

User interactions in Sparkline

Tooltip

Tooltip customization

Inline tooltip formatting

Tooltip template

Track line