Highcharts Demo

author(s): Torstein Hønsi

by Muhammad Mushtaq Sheikh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

<table>
  <tr id="points">
    <td>43934</td>
    <td>52503</td>
    <td>57177</td>
    <td>69658</td>
    <td>97031</td>
    <td>119931</td>
    <td>137133</td>
    <td>154175</td>
  </tr>
</table>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

#points td {
  border: 1px solid black;
}

JavaScript

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {

});

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(proceed, point, event, click) {
  if (click) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  }
});

var chart = Highcharts.chart('container', {
  series: [{
    type: 'column',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
    point: {
      events: {
        mouseOver: function(e) {
          this.series.chart.tooltip.refresh(this, e, true);
        },
         mouseOut: function(e) {
          this.series.chart.tooltip.hide();
        }
      }
    }
  }]
});

//var points = document.getElementById('points').children;

//Highcharts.each(points, function(el, index) {
  //el.addEventListener("click", function(e) {
    //chart.tooltip.refresh(chart.series[0].points[index], e, true);
  //});
//});