Articles in this section
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.


<div id="container"></div>
<script type="text/javascript">    
    //Event handler for trackToolTip event
    function trackTooltip(sender) {        
        if ( == 0) {           
   = "Customized trackball tooltip";
    $(function () {                
            trackToolTip: 'trackTooltip',
            commonSeriesOptions: {                
                type: 'line',
                dashArray: '10, 5',                
            crosshair: {
                type: 'trackball',


The following screenshot displays chart with customized trackball tooltip.

Customization of trackball tooltip text

Figure 1: Output

JS Playground sample link: Trackball tooltip customization


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment