How can I help you?
Tooltip in EJ2 JavaScript Chart control
3 Feb 202624 minutes to read
The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point.
Default tooltip
By default, the tooltip is not visible. You can enable the tooltip by setting the enable property to true and by injecting Tooltip module using Chart.Inject(Tooltip).
var chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Percentage (%)',
minimum: 0, maximum: 20, interval: 2,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: {
visible: true, width: 10, height: 10
},
},
],
title: 'Unemployment Rates 1975-2010',
//Tooltip for chart
tooltip: {enable: true}
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Fixed tooltip
By default, the tooltip tracks the mouse movement. You can render the tooltip at a fixed position by using the location property.
var chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Percentage (%)',
minimum: 0, maximum: 20, interval: 2,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: {
visible: true, width: 10, height: 10
}
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: {
visible: true, width: 10, height: 10
}
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: {
visible: true, width: 10, height: 10
}
},
],
title: 'Unemployment Rates 1975-2010',
//Tooltip for chart
tooltip: { enable: true, location: { x: 120, y: 20 } }
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Format the tooltip
By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format ${series.name} ${point.x} displays the series name along with the x-value of the data point.
var chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Percentage (%)',
minimum: 0, maximum: 20, interval: 2,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: {
visible: true, width: 10, height: 10
},
},
],
title: 'Unemployment Rates 1975-2010',
tooltip: {
enable: true,
//tooltip format for chart
format: '${series.name} ${point.x} : ${point.y}'
}
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<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
Custom HTML content can be rendered in the tooltip by using the template property. The ${x} and ${y} placeholders can be used within the template to display the x- and y-values of the corresponding data point.
var chartData = [
{ x: 1975, y: 16, y1: 10, y2: 4.5 },
{ x: 1980, y: 12.5, y1: 7.5, y2: 5 },
{ x: 1985, y: 19, y1: 11, y2: 6.5 },
{ x: 1990, y: 14.4, y1: 7, y2: 4.4 },
{ x: 1995, y: 11.5, y1: 8, y2: 5 },
{ x: 2000, y: 14, y1: 6, y2: 1.5 },
{ x: 2005, y: 10, y1: 3.5, y2: 2.5 },
{ x: 2010, y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
minimum: 1975,
maximum: 2010,
interval: 5,
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Percentage (%)',
minimum: 0, maximum: 20, interval: 2,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: {
visible: true, width: 10, height: 10
},
},
],
title: 'Unemployment Rates 1975-2010',
tooltip: {
enable: true,
//tooltip template for chart
template: '<div>${x}</div><div>${y}</div>'
}
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Enable highlight
By setting the enableHighlight property to true, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis.
var chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
title: 'Percentage (%)',
minimum: 0,
maximum: 20,
interval: 4,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: { visible: true, width: 10, height: 10 }
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: { visible: true, width: 10, height: 10 }
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: { visible: true, width: 10, height: 10 }
}
],
title: 'Unemployment Rates 1975-2010',
legendSettings: { visible: true },
tooltip: { enable: true, enableHighlight: true }
}, '#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Customize the appearance of tooltip
The appearance of the tooltip can be customized by using the following properties:
-
fillto set the background color -
borderto configure the tooltip border -
textStyleto customize the tooltip text style
The highlightColor property is used to change the color of a data point when it is highlighted during tooltip interaction.
var chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
//Highlight color for tooltip
highlightColor: 'red',
primaryYAxis:
{
title: 'Percentage (%)',
minimum: 0, maximum: 20, interval: 2,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: {
visible: true, width: 10, height: 10
},
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: {
visible: true, width: 10, height: 10
},
},
],
title: 'Unemployment Rates 1975-2010',
tooltip: {
enable: true,
format: '${series.name} ${point.x} : ${point.y}',
//fill for tooltip
fill: '#7bb4eb',
//border for tooltip
border: {
width: 2,
color: 'grey'
}
}
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Closest tooltip
The showNearestTooltip property displays the tooltip for the data point nearest to the pointer, even when the pointer is not directly positioned over the point.
var chartData = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
lineStyle: { width: 0 },
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
title: 'Percentage (%)',
minimum: 0,
maximum: 20,
interval: 4,
labelFormat: '{value}%'
},
series: [
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y',
width: 2, name: 'China',
marker: { visible: true, width: 10, height: 10 }
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y1',
width: 2, name: 'Australia',
marker: { visible: true, width: 10, height: 10 }
},
{
type: 'StepLine',
dataSource: chartData, xName: 'x', yName: 'y2',
width: 2, name: 'Japan',
marker: { visible: true, width: 10, height: 10 }
}
],
title: 'Unemployment Rates 1975-2010',
legendSettings: { visible: true },
tooltip: { enable: true, enableHighlight: true, showNearestTooltip: true }
}, '#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/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">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>