We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom ToolTip values

Thread ID:





125294 Aug 5,2016 01:27 PM UTC Aug 8,2016 06:26 AM UTC JavaScript 1
Tags: ejChart
Robert David
Asked On August 5, 2016 01:27 PM UTC


We're currently ttrying to deal with the following request for the values on the tooltip of a datapoint: 

"  - If the minimum value is 1 or more than display to 2 decimal places.
  - If the minimum value is less that one then display 4 decimal places."

The person making the request would like to keep the raw data on the chart (ie non-rounded values are the datasource for the chart) but only display the rounded values in the tooltip.

Looking through the documentation we can use the x/y properties of the point to set what the tooltip looks like as such

                           tooltip: { visible: true, format: "#series.name#  <br/> #point.x# : #point.y#" },

I have not been able to use the point.x/y in a function. to perform the rounding. Is it possible to use an evaluated function in the template to display the rounded values?

Saravana Kumar Kanagavel [Syncfusion]
Replied On August 8, 2016 06:26 AM UTC

Hi Robert 
Thanks for contacting Syncfusion Support. 
We have analyzed your query and created a sample based on your requirement. In the sample, we have achieved your requirement by using “toolTipInitialize” event.  
Please refer the code example below 
            toolTipInitialize: "toolTip" 
function toolTip(sender) { 
        var seriesIndex = sender.data.seriesIndex, pointIndex = sender.data.pointIndex, 
         currentPoint = sender.model.series[seriesIndex].points[pointIndex], 
         x = currentPoint.x, 
         y = currentPoint.y, 
         yVal = (y < 1) ? y.toFixed(4) : y.toFixed(2); 
         sender.data.currentText = "x : " + x + "</br>" + "y : " + yVal; 
In the above code, if point value is less than 1, we have shown 4 decimal places only on tooltip and if point values is greater than 1, then 2 decimal places will be displayed on tooltip. 
And you can find the sample from the below location. 
And find the output of the sample below 
Please let us know if you have any concern.

Saravana Kumar K 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon