Style tooltip - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

Style tooltip

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Document</title> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
   </head> 
   <body> 
      <div id="container1" style="width:100%; height:400px;"></div> 
      <script type="text/javascript">
    function create_graph() {//  ww  w. ja  va2s  .c om
        var xAxisLabels = ['A ', 'B', 'C', 'D', 'E'];
        var yAxisTitle = 'Average';
        var xAxisTitle = 'XTitle';
        var graphTitle= 'Title';
        var PValues = [1,2,3,4,5];
        var NValues = [1,3,4,5,7];
        chart = new Highcharts.Chart ({
            chart: {
                 height: 600,
                 width: 1200,
                 renderTo: 'container1',
                 type: 'column'
                 //reflow: false
            },
            title: {
                text: graphTitle
            },
            xAxis: {
                categories: xAxisLabels
            },
            yAxis: {
                min: 0,
                title: {
                    text: yAxisTitle
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Postives',
                data: PValues
            }, {
                name: 'Negatives',
                data: NValues
            }]
        });
    }
    create_graph();
  
      </script>  
   </body>
</html>

Related Tutorials