Add additional data in tooltip with dynamic x-axis category - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

Add additional data in tooltip with dynamic x-axis category

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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">
$(function () {//  w ww . j ava  2 s  .co  m
    $('#container').highcharts({
        chart: {
            type: 'columnrange',
            //inverted: true
        },
        xAxis: {
             categories: ['0', "1", "2", "3", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        tooltip: {
           formatter: function () {
                 console.log(this.points);
               var point = this.points[0],
                   series = point.series,
                   GROUP = series.options.GROUP[point.point.x];
              console.log(point);
               return '<b>' + point.x + '<br />' +
                              GROUP + '<br />' + '</b><br />Duration:' +
                              point.series.data[0].low + ' - ' +
                              point.series.data[0].high;
           },
           shared: true
            //valueSuffix: '?C'
        },
        legend: {
            enabled: false
        },
        series: [{
             "name": "aaaa",
           "data": [
           [320, 320.06],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [319.05, 319.1],
           [320, 320.04]
       ],
           "GROUP": [
            ["A"],
           ["B"],
           ["C"],
           ["D"],
           ["E"],
           ["F"],
           ["G"],
           ["H"],
           ["I"],
           ["J"],
           ["K"],
           ["L"]
       ]
   }
            /*{data: [[-9.7, 9.4],
                [-8.7, 6.5]]}*/
        ]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.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