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. Image for the cookie policy date

Custom ToolTip values


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?

1 Reply

SK Saravana Kumar Kanagavel Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon