show one more array in the tooltip - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

show one more array in the tooltip

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <script type="text/javascript">
var Dates = [/*  ww  w. j ava2 s .  c  o  m*/
  "11-10-2017",
  "12-10-2017",
  "13-10-2017",
  "14-10-2017",
  "15-10-2017",
  "16-10-2017",
  "17-10-2017"
];
var FollowersCount = [
  0,
  0,
  0,
  0,
  50,
  10,
  0
];
var Activites = [
  "",
  "",
  "",
  "",
  "Comment,LIke",
  "Like",
  "0"
];
var processedData = [];
for (var i = 0; i < FollowersCount.length; i++) {
  processedData.push({
    y: FollowersCount[i],
    activity: Activites[i]
  })
}
Highcharts.chart('container', {
  xAxis: {
    categories: Dates
  },
  credits: {
    enabled: false
  },
  exporting: {
    chartOptions: { // specific options for the exported image
      plotOptions: {
        series: {
          dataLabels: {
            enabled: true
          }
        }
      }
    },
    sourceWidth: 400,
    sourceHeight: 300,
    scale: 1,
    buttons: {
      customButton: {
        text: 'Next Dates',
        onclick: function() {
          console.log('You pressed the button!');
        }
      },
      anotherButton: {
        text: 'Previous Dates',
        onclick: function() {
          console.log('You pressed another button!');
        }
      }
    }
  },
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true
      }
      //enableMouseTracking: false
    }
  },
  tooltip: {
    formatter: function() {
       let tmpTooltip = '<b>' + this.point.category + '</b><br/><span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.y + '</b>';
      if (this.point.activity != "") {
        return tmpTooltip + '<br/><b>Activity:</b>' + this.point.activity;
      } else {
        return tmpTooltip;
      }
    }
  },
  title: {
    text: "Followers"
  },
  series: [{
    name: 'Followers',
    data: processedData
  }]
});

      </script>  
   </body>
</html>

Related Tutorials