Display additional information in the tooltip - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

Display additional information in the tooltip

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// w  w w .  java2 s. c  o  m
//this is extra data you want to add in series in tooltip
var extraData = [
  886.0,
  114.0,
  175.0,
  110.0,
  115.0,
  128.0,
]
Highcharts.chart('container', {
  chart: {
    type: 'column',
    zoomType: 'x',
    marginBottom: 150,
    marginLeft: 10,
  },
  credits: {
    enabled: false,
  },
  title: {
    text: null
  },
  subTitle: {
    text: null
  },
  legend: {
    enabled: true,
    borderWidth: 1,
  },
  tooltip: {
    shared: true,
    valueDecimals: 2,
    formatter: function() {
      var s = '<b>' + this.x + '</b>';
      var reqpoint = 0;
      $.each(this.points, function() {
        var reqpoint = this.point.index
        s += '<br/>' + this.series.name + ': ' +
          this.y.toFixed(2) + 'm';
        if (this.series.index == 1) {
          s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
        }
      });
      return s;
    },
  },
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(event) {
          }
        }
      },
      marker: {
        lineWidth: 1
      }
    },
  },
  yAxis: [{
    visible: false,
    title: {
      text: 'a',
    },
  }, {
    visible: false,
    title: {
      text: 'b',
    },
  }, ],
  xAxis: {
    labels: {
      rotation: -45,
    },
    categories: [
      'Westerbarkei',
      'Diatschenko',
      'Loska',
      'Tachonova 22',
      'Schumacher',
      'Fischer',
    ]
  },
  series: [{
      name: 'Consum (l/100km)',
      valueDecimals: 2,
      yAxis: 0,
      data: [
        292.7,
        41.59,
        40.91,
        40.28,
        39.48,
        39.38,
      ]
    }, {
      name: 'Total Consum (l)',
      valueDecimals: 2,
      yAxis: 1,
      data: [
        823.0,
        1252.0,
        756.0,
        1086.0,
        1510.0,
        280.0,
      ]
    }
  ]
});
    }

      </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" < div>  
      </div>
   </body>
</html>

Related Tutorials