Category / Section
How to dynamically customize trackball tooltip text?
2 mins read
Essential Chart supports customizing tooltip text in Trackball dynamically by using Chart’s trackToolTip event. Refer Chart events for more information about the events available in Chart. Refer TrackToolTip event for more information about the arguments available in the track tooltip event handler.
The event handler receives an object containing the cancel, data, model and type properties. The currentText property present in data property of the argument can be used to customize the trackball tooltip text. The following code example illustrates this.
JS
<div id="container"></div>
<script type="text/javascript">
//Event handler for trackToolTip event
function trackTooltip(sender) {
if (sender.data.serIndex == 0) {
sender.data.currentText = "Customized trackball tooltip";
}
}
$(function () {
$("#container").ejChart({
trackToolTip: 'trackTooltip',
commonSeriesOptions: {
type: 'line',
dashArray: '10, 5',
},
crosshair: {
type: 'trackball',
visible:true
}
});
});
</script>
Screenshot
The following screenshot displays chart with customized trackball tooltip.
Figure 1: Output
JS Playground sample link: Trackball tooltip customization
