Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

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

.hoverbtn {
  display:none;
}



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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        const chart = this;
        const {
          tickPositions,
          ticks
        } = chart.xAxis[0];

        tickPositions.forEach(tickPosition => {
          const tick = ticks[tickPosition];
          const label = tick.label;

          label.on('mouseover', e => {
            if (chart.myLabel) {
              chart.myLabel.destroy();
            }

            chart.myLabel = chart.renderer.button(label.textStr, e.x, e.y, function() {
                const tickPos = tick.pos;
                chart.series.forEach(series => {
                const group = series.data.find(point => point.x === tickPos);
                  if(group) {
                               alert(group.category);
                  }
                });
                chart.redraw();
              }, 'rectangle')
              .css({
                color: '#FFFFFF'
              })
              .attr({
                fill: 'rgba(0, 0, 0, 0.75)',
                padding: 8,
                r: 4
              })
              .add()
              .toFront();
          });

          label.on('mouseout', () => {
            if (chart.myLabel) {
              setTimeout(() => {
                if (chart.myLabel) {
                  chart.myLabel.destroy();
                  chart.myLabel = null;
                }
              }, 1000);
            }
          });
        });
      }
    }
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
  }]
});