Format tooltip for line chart with custom function - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Format tooltip for line chart with custom function

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  ww.j a v  a 2s. co  m*/
$(function () {
    $('#container').highcharts({exporting: { enabled: false } ,
        xAxis: {
              type: 'datetime',
dateTimeLabelFormats: {
            day: '%d. '
        },tickInterval: 24 * 3600 * 1000
        },
        yAxis: {
            floor: 0,
            title: {
                text: 'Pageviews'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        title: {
            text: 'Pagesviews Summary',
            x: -20 //center
        },
        subtitle: {
        //    text: 'pageviews over time',
            x: -20
        },
        tooltip: {
            valueSuffix: ' Pageviews',
                crosshairs: true,
                 formatter: function() {
        var date = new Date(this.x);
        var year = date.getFullYear();
        return '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y + ' pageviews';
     },
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
                 series: [  { name: 'Pageviews', data: [ 26562,5793,26585,2203,1444,2150,2833,2416,10114,13564,16234,15253,5415,10340,18184,12830,14340,21520,18883,41571,23913,16013,16681,10499,18557,18692,14550,6655,17490,46258,26671,5739,26585,49114,30038,25998,19076,26577,10231,24110 ],pointInterval: 24 * 3600 * 1000 } ]
    });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <div id="container" style="width:80%; height:400px; margin:0 auto;">  
      </div>
   </body>
</html>

Related Tutorials