tooltip point Format decimal to percent - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Tooltip

Description

tooltip point Format decimal to percent

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts :  tooltip formatting by doing calculations on point y value and float value truncated upto two decimal places</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
x = null;// ww w  . j a  v  a 2  s  .c  o m
$(function () {
        $('#container').highcharts({
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            tooltip: {
                //valueSuffix: '?C',
                enabled: true,
                formatter:function(){
                  return '<span style="color:'+this.series.color+'">'+this.series.name+'</span>: <b>'+Highcharts.numberFormat((this.y*100),2,'.')+'%</b>';
                }
            },
            chart: {
            },
            plotOptions: {
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.91234, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials