User interaction in EJ2 JavaScript Sparkline control
18 Apr 202315 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.
//Initialize Sparkline component
var sparklineInstance = new ej.charts.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}'
}
});
//Render initialized Sparkline
sparklineInstance.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/25.1.35/ej2-charts/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container" style="margin-top: 15%;">
<div class="spark" id="element" align="center"></div>
</div>
<style>
.sparktooltip {
border-radius: 5px;
background: #008cff;
color: #FFFFFF !important;
font-size: 16px;
font-style: italic;
padding: 8px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></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.
//Initialize Sparkline component
var sparklineInstance = new ej.charts.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'
},
}
});
//Render initialized Sparkline
sparklineInstance.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/25.1.35/ej2-charts/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container" style="margin-top: 15%;">
<div class="spark" id="element" align="center"></div>
</div>
<style>
.sparktooltip {
border-radius: 5px;
background: #008cff;
color: #FFFFFF !important;
font-size: 16px;
font-style: italic;
padding: 8px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></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 sparktooltip 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;
}
//Initialize Sparkline component
var sparklineInstance = new ej.charts.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>'
}
});
//Render initialized Sparkline
sparklineInstance.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/25.1.35/ej2-charts/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container" style="margin-top: 15%;">
<div class="spark" id="element" align="center"></div>
</div>
<style>
.sparktooltip {
border-radius: 5px;
background: #008cff;
color: #FFFFFF !important;
font-size: 16px;
font-style: italic;
padding: 8px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></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.
//Initialize Sparkline component
var sparklineInstance = new ej.charts.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
}
}
});
//Render initialized Sparkline
sparklineInstance.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/25.1.35/ej2-charts/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container" style="margin-top: 15%;">
<div class="spark" id="element" align="center"></div>
</div>
<style>
.sparktooltip {
border-radius: 5px;
background: #008cff;
color: #FFFFFF !important;
font-size: 16px;
font-style: italic;
padding: 8px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>