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

Tooltips and percentage values

Hi
If I use tooltips on a pie chart then I might want to display something like:

Reactive Tasks: 40 (50%)

this might be in the form of 
#point.x#:  #point.y# (??????)

How do I get the percentage?  I would prefer to not have to add it to the data source as that is extra data when it is already being calculated on the client.

Many thanks

Jon

3 Replies

SK Saravana Kumar Kanagavel Syncfusion Team October 10, 2016 06:40 AM UTC

Hi Jon, 
 
Thanks for contacting Syncfusion Support.  
We have analyzed your query and created a sample based on your requirement. You can display the y value as percentage by using “ej.format()” on tooltip. 
 
Please refer the code example below 
 
[JS] 
$("#container").ejChart( 
          { 
              series: 
              [ 
                  { 
                      tooltip: { 
                          visible: true, 
                          format: "#series.name# :#point.x# (ej.format(#point.y#,p0))" 
                      } 
                  } 
 
              ] 
     }); 
 
 
In the above code, we have used ej.format() to display the y value as percentage in tooltip. And if you wish to display the currency or number format, so please refer the format to be given below. 
 
v  ej.format(#point.y#,c0) à for currency format 
v  ej.format(#point.y#,n0) à for number format. 
 
And you can find the sample from the below location. 
 
  
Please find the output of the sample below 
 
 
To know more details about tooltip, please refer the below link 
 
 
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K 



JE Jon E October 10, 2016 06:55 AM UTC

Hi

Thanks for that although I think that maybe one of us is misunderstanding the other.
In my data it looks something like 
{ x: 'Reactive data', y: 45 },
{ x: 'Planned data, y: 67 },
{ x: 'Internal task data', y: 89 }

In the above y is the count NOT the percentage.  I would like the tooltip to show
#point.x#:  #point.y# (percentage value)

Short of adding an extra value in the original data set I am not sure how to do that.

Also, on the help page I am not sure how the series colour has carried into the template of the tooltip, could you explain please - the one shown in this demo

Finally,  none of the online demos have any narrative explaining what they demonstrate.  Most are obvious but a few are a little unclear as to what they are trying to show, or they show several things.  Could some narrative be added to them please?


AT Anandaraj T Syncfusion Team October 12, 2016 06:41 AM UTC

Hi Jon, 

Thanks for the update. 

Query #1: I would like the tooltip to show #point.x#: #point.y# (percentage value) 

We can achieve your requirement using the load event of chart. We cannot use options like #point.y# directly, because percentage value of the points are not stored after calculations in Chart. 

We have created a sample in the following link to display percentage values in tooltip 

JS Playground sample link: http://jsplayground.syncfusion.com/re4up4kk 
 
Please refer the following code snippet to achieve this 
[JS] 
 
    $("#container").ejChart( 
    { 
        //. . . 
 
        //Load event of Chart 
        load: "onload", 
    }); 
 
    //Load event handler 
    function onload(args) { 
 
        var series = args.model.series; 
        for (var i = 0; i < series.length; i++) { 
            var total = 0; 
            //Calculate total value 
            for (var j = 0; j < series[i].points.length; j++) 
                total += series[i].points[j].y; 
 
            //Set percentage value to an option in point or create a new option in point 
            //text option of point is used because it will reflect in both data label and tooltip 
            for (j = 0; j < series[i].points.length; j++) 
                series[i].points[j].text = (series[i].points[j].y / total * 100).toFixed(2) + '%'; 
        } 
    } 

Query #2: Also, on the help page I am not sure how the series color has carried into the template of the tooltip, could you explain please - the one shown in this demo 

Chart will automatically apply the fill color of series to the background color of tooltip template. Additionally, the template can be further customized or styled with CSS styles. In the above demo, tooltip template appears with customized styles. 

Following JS Playground sample displays tooltip template without any customized styles 

Styles applied to the tooltip template in online demo is shown in the following table 

[CSS] 
 
<style class="cssStyles"> 
    label { 
        margin-bottom: -25px !important; 
        text-align: center !important; 
    } 
 
    .tooltipDivcontainer { 
        background-color: #E94649; 
        color: white; 
        width: 130px; 
    } 
 
    #Tooltip > div:first-child { 
        float: left; 
    } 
 
    #Tooltip #value { 
        float: right; 
        height: 50px; 
        width: 68px; 
    } 
 
        #Tooltip #value > div { 
            margin: 5px 5px 5px 5px; 
        } 
 
    #Tooltip #efpercentage { 
        font-size: 20px; 
        font-family: segoe ui; 
        padding-left: 2px; 
    } 
 
    #Tooltip #ef { 
        font-size: 12px; 
        font-family: segoe ui; 
    } 
 
    #eficon { 
        background-image: url("../content/images/chart/eficon.png"); 
        height: 60px; 
        width: 60px; 
        background-repeat: no-repeat; 
    } 
</style> 


Query #3: Finally,  none of the online demos have any narrative explaining what they demonstrate.  Most are obvious but a few are a little unclear as to what they are trying to show, or they show several things.  Could some narrative be added to them please? 

We have considered this requirement as a new feature for the samples in our JavaScript sample browser. Thanks for helping us define this feature. We have added it to our feature request list, and it will be available in any of our upcoming releases. 

Please let us know if you have any concern. 

Regards, 
Anand

Loader.
Up arrow icon