JavaScript Chart - Tooltips ImplementationUser-Defined Tooltips

VIEW MORE FEATURES
SAVE
VIEW HTML
EDIT ON CODEPEN
Tooltips can be displayed on the chart created by using KoolChart's JavaScript charting library. To display tooltips when the user mouse overs an item, the showDataTips attribute on the chart element must be set to true.

In this JavaScript chart example, a user-defined JavaScript function is called to display tooltips when the user mouse overs the columns on the chart.
<Column3DChart showDataTips="true" dataTipJsFunction="dataTipFunc">

function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values) {
return "<table cellpadding='0' cellspacing='1'>"
+"<tr>"
+"<td align='center' colspan='2' style='border-bottom:solid 1px #8b8b8b;'><img src='https://www.koolchart.com/demo/KoolChart/Assets/Images/monitor.png'></td>"
+"</tr><tr>"
+"<td >series ID</td><td align='center'>" + seriesId + "</td>"
+"</tr><tr>"
+"<td>displayName</td><td align='center'>" + seriesName + "</td>"
+"</tr><tr>"
+"<td>item Index</td><td align='center'>" + index + "</td>"
+"</tr><tr>"
+"<td>X-Axis Name</td><td align='center'>" + xName + "</td>"
+"</tr><tr>"
+"<td>X-Axis Name</td><td align='center'>" + yName + "</td>"
+"</tr><tr>"
+"<td>X-Axis Value</td><td align='center'>" + values[0] + "</td>"
+"</tr><tr>"
+"<td>Y-Axis Value</td><td align='center'>" + values[1] + "</td>"
+"</tr><tr>"
+"<td style='background-color:#e5e5e5;'>Total</td><td align='center' style='background-color:#e5e5e5;'>" + getSum(data) + "</td>"
+"</tr></table>";
}

function getSum(values) {
var sum = 0;
for(var v in values) {
sum += Number(values[v]) || 0;
}
return sum;
}