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.
Unfortunately, activation email could not send to your email. Please try again.

Custom ToolTip values

Thread ID:

Created:

Updated:

Platform:

Replies:

125294 Aug 5,2016 09:27 AM Aug 8,2016 02:26 AM JavaScript 1
loading
Tags: ejChart
Robert David
Asked On August 5, 2016 09:27 AM

hello.

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

   commonSeriesOptions:
                    {
                           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 02:26 AM

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 
 
[JS] 
$("#container").ejChart( 
     { 
            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.

Regards,
Saravana Kumar K 
 


CONFIRMATION

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.

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.

;