shared and split tooltip, style the hover xAxis labels for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

shared and split tooltip, style the hover xAxis labels for 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="https://code.jquery.com/jquery-3.1.1.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-tooltip-box {//from w  w  w. j a va  2 s  .c  o  m
   fill: red;
}


      </style> 
      <script type="text/javascript">
$(function() {
  Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function(p, labels, points) {
    p.call(this, labels, points);
    var tt = this.tt;
    if (tt) {
      tt.attr({
        padding: 15,
        fill: 'red',
        stroke: 'blue',
        'stroke-width': 3,
        r: 10
      });
      tt.text.attr({
        y: 45
      })
    }
  });
  Highcharts.chart('container', {
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      tickmarkPlacement: 'on',
      labels: {
        style: {
          color: 'red'
        }
      }
    },
    tooltip: {
      split: true,
      headerFormat: '<span style="font-size: 30px; color: white">{point.key}</span>'
    },
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
      data: [89.9, 21.5, 126.4, 149.2, 14.0, 76.0, 35.6, 48.5, 26.4, 14.1, 98.6, 94.4]
    }]
  });
});

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

Related Tutorials