‘Bullet Chart’ will display the details of ‘Actual’ and ‘Target’ values through ‘Tooltip’ when the mouse is moved over the ‘Target’ and the ‘Feature’ bar.
By setting enable
the property to ‘True’ and by injecting BulletTooltip
module
using BulletChart.Inject(BulletTooltip)
.The ‘Tooltip’ is visible in the ‘Bullet chart’ by default.
var localData = [
{
value: 5, comparativeMeasureValue: 7.5,
category: '2001'
},
{
value: 7, comparativeMeasureValue: 5,
category: '2002'
},
{
value: 10, comparativeMeasureValue: 6,
category: '2003'
},
{
value: 5, comparativeMeasureValue: 8,
category: '2004'
},
{
value: 12, comparativeMeasureValue: 5,
category: '2005'
},
{
value: 8, comparativeMeasureValue: 6,
category: '2006'
}
];
var chart = new ej.charts.BulletChart({
dataSource: localData,
animation: { enable: false },
valueField: 'value',
targetField: 'comparativeMeasureValue',
title: 'Profit in %',
height: '400',
ranges: [{ end: 5 },
{ end: 15 },
{ end: 20 }
],
minimum: 0, maximum: 20, interval: 5,
}, '#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/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Tooltip" type="text/x-template">
<div id="wrap">
<table style="width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px">
<tr>
<td style="font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;">Sales</td>
</tr>
<tr>
<td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Target : ${target}K </td>
</tr>
<tr>
<td style="padding-left: 5px; color:black; padding-right: 5px">Current : ${value}K </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>
Any ‘HTML’ elements can be displayed in the ‘Tooltip’ by using the ‘Tooltip’ property Template.
You can use the ${target} and ${value} as place holders in the ‘HTML’ element to display the ‘Value’ and ‘Target’ values of the corresponding data point.
var chart = new ej.charts.BulletChart({
height: '110px',
tooltip: { enable: true, template : '#Tooltip' },
dataSource: [{ value: 70, target: 50 }],
valueField: 'value',
targetField: 'target',
animation: { enable: false },
ranges: [{ end: 30, color: '#599C20' },
{ end: 60, color: '#EFC820' },
{ end: 100, color: '#CA4218' }
],
minimum: 0, maximum: 100, interval: 10,
title: 'Revenue YTD',
labelFormat: '${value}K',
}, '#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/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Tooltip" type="text/x-template">
<div id="wrap">
<table style="width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px">
<tr>
<td style="font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;">Sales</td>
</tr>
<tr>
<td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Target : ${target}K </td>
</tr>
<tr>
<td style="padding-left: 5px; color:black; padding-right: 5px">Current : ${value}K </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>
The fill
and border
properties are used to customize the background color and border of the tooltip respectively. The textStyle
property in the tooltip is used to customize the font of the tooltip text.
<!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/dist/ej2.min.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>