make Tooltip position to be visible in the Viewport in line chart - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

make Tooltip position to be visible in the Viewport in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from   w w  w  . j ava2  s .c o  m
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
        },
        tooltip : {
            formatter: function() {
                var tooltip;
                if (this.key == 'last') {
                    tooltip = '<b>Final result is </b> ' + this.y;
                }
                else {
                    tooltip =  '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
                }
                return tooltip;
            }
        },
        series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, {y:135.6, name: 'last'}]
        },
        {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 300px"></div>  
   </body>
</html>

Related Tutorials