tooltip for highstock - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

tooltip for highstock

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Stock 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  va2s  .c  o m
  var chart = new Highcharts.StockChart({
    chart: {
      renderTo: 'container'
    },
    rangeSelector: {
      allButtonsEnabled: true,
      buttons: [{
          type: 'week',
          count: 1,
          text: '1w'
        },
        {
          type: 'all',
          text: 'all'
        }
      ],
      selected: 0
    },
    series: [{
      name: 'USD',
      data: [
        [0, null],
        [86400000, null],
        [86400000 * 2, null],
        [86400000 * 3, null],
        [86400000 * 4, null],
        [86400000 * 5, null],
        [86400000 * 6, 3],
        [86400000 * 7, 4],
        [86400000 * 8, 6],
        [86400000 * 9, 8],
      ]
    }],
    plotOptions: {
      line: {
        dataGrouping: {enabled: false},
        step: 'left',
        connectNulls: true,
        tooltip: {
          pointFormatter: function() {
            var preIndex = this.index - 1;
            while (preIndex >= 0 && this.series.data[preIndex].y == null) {
              preIndex--;
            }
            if (preIndex < 0) {
              return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b><br/>';
            } else {
              var prePoint = this.series.data[preIndex];
              var prePointY = prePoint.y;
              var prePointX = prePoint.x;
              var day = (this.x - prePointX) / 86400 / 1000;
              var add = this.y - prePointY
              add_str = '(' + add + ')';
              return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b> ' + add_str + '<br/>';
            }
          }
        }
      }
    },
  });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 600px"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>  
   </body>
</html>

Related Tutorials