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. <Pie2DChart>, <Column2DChart>, etc. ).

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

...
<Pie2DChart showDataTips="true" dataTipJsFunction="dataTipFunc" >
'''
  <Pie2DSeries ... >
    ...
  </Pie2DSeries>
...
</Pie2DChart>
...

function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values)
{
  var percentVal = (Math.round(values[1]*100)) / 100;
  
  return "<font color='#CC3300'>User-defined tooltips</font><br/>seriesId:"+seriesId
    +"<br/><font color = '#0000FF'>Current Data: </font>"
    +"<b>" + seriesName + "</b>"
    +"<br/>itemIndex:" + index
    +"<br/>data : <br/>" + objectToString(data)
    +"<br/>Month : " + values[2]
    +"<br/>value : " + values[0]
    +"<br/>Percent Value : " + percentVal + "<font color='#FF0000'>%</font>";
}

function objectToString(values) {
  var r = "";
  
  for (var p in d) {
    if (r.length > 0)
      r += "<br/>";
    r += "   "+d[p];
  }
	
  return r;
}

© 2017 KoolChart. All rights reserved.