Tooltip customization examples

[Slobodan Babic]

Hello.

Could you please provide some examples of chart tooltip customization?

Documentation is somewhat scarse. I am particularly interested in using 'format' and 'template' properties, but I can't find any details about them, other than they are strings. Are strings supposed to be HTML? 

Any example would be helpful. 

Thank you. 

[Dharanidharan Dharmasivam]

Hi Slobodan, 

Thanks for using Syncfusion products. 

We have analyzed your query and created samples with respect to your requirement. You can customize the tooltip with respect to your requirement. 

If you need to specify format to tooltip, then you can specify the required format in tooltip.format property. Kindly find the sample for tooltip with format property: 

http://plnkr.co/edit/lFueADrI1buHtrHqKWIO?p=preview  

Code snippet: 

TS: 

let chart: Chart = new Chart({ 

     tooltip: { 

            enable: true, 

            //tooltip format for chart 

            format: 'X Value: <b>${point.x}</b><br/>Y Value: <b>${point.y}</b>' 

        }  

        //... 

}); 

Screenshot: 

 

The template property is of string type. Here either you can specify the id of html element(for example div) or directly you can specify the html element as string to the template property as depicted in the below code snippet.  

Sample with template property by passing html element in template property: 

http://plnkr.co/edit/imVCitCJL1BB8lzpCbAd?p=preview  

Sample by passing id to template property: 

http://plnkr.co/edit/dcwHx82HeuEXVk37lF1g?p=preview  

Code snippet: 

TS: 

//Code snippet to specify the html element in the template property 

let chart: Chart = new Chart({ 

        tooltip: { 

            enable: true, 

            //tooltip template by passing html element 

            template: '<div id="tooltipTemplate"><div>X Value: ${x}</div><div>Y Value: ${y}</div></div>' 

        }             

        //... 

}); 

 

//Code snippet to specify the id in template property 

<script id="customTooltip" type="text/x-template"> 

        <div id="tooltipTemplate"> 

            <div>X Value: ${x}</div> 

            <div>Y Value: ${y}</div> 

        </div> 

    </script> 

 

let chart: Chart = new Chart({ 

        tooltip: { 

            enable: true, 

            //tooltip template by passing id 

            template: '#customTooltip' 

        }             

        //... 

}); 

 

 

Screenshot: 

 

For more information on user interactions, kindly find the help document from below. 

http://ej2.syncfusion.com/15.4.23/documentation/chart/user-interaction.html?lang=typescript  

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani.