User interaction in TypeScript Sparkline control

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.

import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';
Sparkline.Inject(SparklineTooltip);

let sparkline: Sparkline = new Sparkline({
    height: '200px',
    width: '500px',
    axisSettings: {
        minX: -1, maxX: 7, maxY: 8, minY: -1
    },
    fill: 'blue',
    valueType: 'Category',
    xName: 'x', yName: 'y',
    dataSource:   [{x: 'Mon', y: 3 },{x: 'Tue', y: 5 },{x: 'Wed', y: 2 },{x: 'Thu', y: 4 },{x: 'Fri', y: 6 },],
    // To enable tooltip for sparkline
    tooltipSettings: {
        visible: true,
        // formatting tooltip text
        format: '${x} : ${y}'
    }
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Sparkline UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 15%;">
            <div class="spark" id="element" align="center" ></div>
    </div>
</body>
<style>
    .sparktooltip {
        border-radius: 5px;
        background: #008cff;
        color: #FFFFFF !important;
        font-size: 16px;
        font-style: italic;
        padding: 8px;
    }
</style>
</html>

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.

import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';
Sparkline.Inject(SparklineTooltip);

let sparkline: Sparkline = new Sparkline({
    height: '200px',
    width: '500px',
    axisSettings: {
        minX: -1, maxX: 7, maxY: 8, minY: -1
    },
    fill: '#033e96',
    valueType: 'Category',
    xName: 'x', yName: 'y',
    dataSource:   [{x: 'Mon', y: 3 },{x: 'Tue', y: 5 },{x: 'Wed', y: 2 },{x: 'Thu', y: 4 },{x: 'Fri', y: 6 },],
    // To enable tooltip for sparkline with fill color customization
    tooltipSettings: {
        visible: true,
        format: '${x} : ${y}',
        fill: '#033e96',
        textStyle: {
            color: 'white'
        },
    }
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Sparkline UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 15%;">
            <div class="spark" id="element" align="center" ></div>
    </div>
</body>
<style>
    .sparktooltip {
        border-radius: 5px;
        background: #008cff;
        color: #FFFFFF !important;
        font-size: 16px;
        font-style: italic;
        padding: 8px;
    }
</style>
</html>

Inline tooltip formatting

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:

tooltipSettings: {
    visible: true,
    format: '${x:MMM yyyy} : ${y:n2}'
}

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.

import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';

Sparkline.Inject(SparklineTooltip);

let sparkline: Sparkline = new Sparkline({
    height: '200px',
    width: '500px',
    axisSettings: {
        minY: -1,
        maxY: 8
    },
    fill: 'blue',
    valueType: 'DateTime',
    xName: 'x',
    yName: 'y',
    dataSource: [
        { x: new Date(2024, 0, 1), y: 3 },
        { x: new Date(2024, 1, 1), y: 5 },
        { x: new Date(2024, 2, 1), y: 2 },
        { x: new Date(2024, 3, 1), y: 4 },
        { x: new Date(2024, 4, 1), y: 6 }
    ],
    // To enable tooltip for sparkline
    tooltipSettings: {
        visible: true,
        // formatting tooltip text
        format: '${x:MMM yyyy} : ${y:n2}'
    }
});

sparkline.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Sparkline UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 15%;">
            <div class="spark" id="element" align="center" ></div>
    </div>
</body>
<style>
    .sparktooltip {
        border-radius: 5px;
        background: #008cff;
        color: #FFFFFF !important;
        font-size: 16px;
        font-style: italic;
        padding: 8px;
    }
</style>
</html>

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 spark tooltip css class that is used in tooltip template div. Using this template, images also can be added to tooltip.

.sparktooltip {
  border-radius: 5px;
  background: #008cff;
  color: #FFFFFF !important;
  font-size: 16px;
  font-style: italic;
  padding: 8px;
}

import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';
Sparkline.Inject(SparklineTooltip);

let sparkline: Sparkline = new Sparkline({
    height: '200px',
    width: '500px',
    axisSettings: {
        minX: -1, maxX: 7, maxY: 8, minY: -1
    },
    fill: '#033e96',
    valueType: 'Category',
    xName: 'x', yName: 'y',
    dataSource:   [{x: 'Mon', y: 3 },{x: 'Tue', y: 5 },{x: 'Wed', y: 2 },{x: 'Thu', y: 4 },{x: 'Fri', y: 6 },],
    // To enable tooltip template for sparkline with fill color, border radius and padding customization
    tooltipSettings: {
        visible: true,
        template: '<div class="sparktooltip">${x} : ${y}<div>'
    }
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Sparkline UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 15%;">
            <div class="spark" id="element" align="center" ></div>
    </div>
</body>
<style>
    .sparktooltip {
        border-radius: 5px;
        background: #008cff;
        color: #FFFFFF !important;
        font-size: 16px;
        font-style: italic;
        padding: 8px;
    }
</style>
</html>

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.

import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';
Sparkline.Inject(SparklineTooltip);

let sparkline: Sparkline = new Sparkline({
    height: '200px',
    width: '500px',
    axisSettings: {
        minX: -1, maxX: 46, maxY: 10, minY: -1
    },
    fill: '#033e96',
    dataSource:   [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],
    // To enable tooltip template for sparkline with fill color, border radius and padding customization
    tooltipSettings: {
        trackLineSettings: {
            visible: true,
            color: '#033e96',
            width: 1
        }
    }
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Sparkline UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 15%;">
            <div class="spark" id="element" align="center" ></div>
    </div>
</body>
<style>
    .sparktooltip {
        border-radius: 5px;
        background: #008cff;
        color: #FFFFFF !important;
        font-size: 16px;
        font-style: italic;
        padding: 8px;
    }
</style>
</html>