Next
Update
Prev
Default

ToolTips or DataTips can be customized using the JavaScript function. If you want to use a JavaScript function to display Tooltips, you must set the JavaScript function name to the value of dataTipJsFunction attribute in the Chart element tag ( e.g. <Line2DChart>, <Column2DChart>, etc. ).

This sample column chart is to show how to use the JavaScript function to create the customized Tooltips. If you mouse over the column in the column chart, then you will see Tooltips created using the HTML tags.

...
<Column3DChart showDataTips="true" dataTipJsFunction="dataTipFunc" >
'''
  <Column3DSeries ... >
    ...
  </Column3DSeries>
...
</Column3DChart>
...

function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values)
{
  var str = "<table cellpadding='0' cellspacing='0' style='font-family:Malgun Gothic;border:solid 1px #888888;padding:4px;'>";
    str += "<tr>";
    str += "<td align='center'>Image</td><td align='cneter'><img src='http://www.koolchart.com/images/logo.jpg'></td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "series ID" + "</td><td align='center'>" + seriesId + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "displayName" + "</td><td align='center'>" + seriesName + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "item Index" + "</td><td align='center'>" + index + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "X-axis Name" + "</td><td align='center'>" + xName + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "Y-axis Name" + "</td><td align='center'>" + yName + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "X-axis Value" + "</td><td align='center'>" + values[0] + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "Y-axis Value" + "</td><td align='center'>" + values[1] + "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td align='center'>" + "Total" + "</td><td align='center'>" + getSum(data) + "</td>";
    str += "</tr>";
    str += "</table>";
	
  return str;
}

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

© 2017 KoolChart. All rights reserved.