get multiple series data in tooltip without loosing tooltip pointer arrow - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

get multiple series data in tooltip without loosing tooltip pointer arrow

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(function(){/*from  w  w w  .j a  v a  2 s.  c o m*/
$(function() {
  $('#container').highcharts({
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
        'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]
    },
    tooltip: {
 //     shared: true,
      formatter: function (tooltip) {
        const series = this.series.chart.series.find(series => series !== this.series);
        const point = series.points.find(point => point.category === this.x);
        if (point !== undefined) {
          return tooltip.defaultFormatter.call([point.getLabelConfig(), this], tooltip);
        }
      }
    },
    series: [{
      showInLegend: false,
      name: 'Total Click',
      data: [3000, 200, 50, 4000],
      color: '#9D9D9D'
    }, {
      showInLegend: false,
      name: 'Total View',
      data: [100, 2000, 3000, 4000],
      color: '#D8D8D8'
    }]
  });
});
    });

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

Related Tutorials