Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

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

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

SCSS

.custom {
  display: block;
  color: red;
}

.hoverbtn {
  display:none;
}



  
  .custom:hover {
    .hoverbtn {
  display:block;
  }
  }

JavaScript

var chart = Highcharts.chart('container', {
  xAxis: {
    labels: {
      enabled: true,
      useHTML: true,
      formatter: function() {
        return '<span class="custom" title="My custom title">' + this.value + '<button class="hoverbtn">click</button></span>' ;
      },
    },
  },
  series: [{
    data: [4, 3, 5, 6, 2, 3]
  }]

});

chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
	label.style.cursor = "pointer";
  label.onclick = function(){
  	alert('You clicked on '+this.textContent);
  }
});