Basic column

by vasagi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.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', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia'],
    labels: {
      x: 5,
      useHTML: true,
      formatter: function() {
        return '<span class="custom" title="My custom title">' + this.value + '<button class="hoverbtn">Remove</button></span>';
      },
       events: {
                click: function(e) {
      
                   console.log(e.target, this);
                }
            }
    }
  },
  series: [{
      name: 'Corn',
      data: [406292, 260000, 107000, 68300, 27500, 14500]
    },
    {
      name: 'Wheat',
      data: [51086, 136000, 5500, 141000, 107180, 77000]
    }
  ]
});

/* document.querySelectorAll('.xlabel').forEach((ele, index) => {
  ele.addEventListener('click', (e) => {
    alert('Remove ' + chart.xAxis[0].categories[index])
  });
}) */