Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button class='btn'>
  show last clicked point
</button>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  title: {
    text: 'Stacked column chart'
  },


  yAxis: {
    stackLabels: {
      enabled: true,
    }
  },


  plotOptions: {
    column: {
      stacking: 'normal'
    },
    series: {
    	events: {legendItemClick: function(event) { console.log('LEGEND CLICKED');event.preventDefault();}},
      point: {
        	events: {
          		mouseOver: function() {
          	  	console.log(this)
           	 	alert((this.id))
          		}
       		}
      }
    }
  },

  series: [{
    data: [22, 11, 33, 24, 21, 23, 23]
  }, {
    data: [23, 12, 44, 33, 54, 11, 23]
  }]

}, function(chart) {
  $('.btn').click(function() {
    console.log(chart.clickedPoint);
  });
});