Highcharts Demo

author(s): Torstein Hønsi

by Anand Rathod

HTML

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

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

JavaScript

Highcharts.chart('container', {

  xAxis: {
    plotBands: [{
      color: '#FCFFC5',
      from: 1,
      to: 2,
      events: {
        mouseover: function() {
          let chart = this.axis.chart;
          if (chart.customLabel) {
            chart.customLabel.destroy();
          }
          chart.customLabel = chart.renderer.label(
              "<a class='aaa' href='https://highcharts.com' target='_blank'>Click Me</a>",
              50,
              50,
              50,
              50,
              false,
              true
            )
            .attr({
              fill: 'red',
              padding: 8,
              r: 5,
              zIndex: 6
            })
            .add()
        }
      }
    }, {
      color: '#bfdffc',
      from: 3,
      to: 4,
      events: {
        mouseover: function() {
          let chart = this.axis.chart;
          if (chart.customLabel) {
            chart.customLabel.destroy();
          }
          chart.customLabel = chart.renderer.label(
              "<a class='aaa' href='https://google.com' target='_blank'>Click Me</a>",
              50,
              100,
              50,
              50,
              false,
              true
            )
            .attr({
							fill: '#e8e3e3',
              padding: 8,
              r: 5,
              zIndex: 6
            })
            .add()
        }
      }
    }]
  },

  series: [{
    data: [43934, 32503, 57177, 69658, 7031, 19931, 37133, 54175]
  }],

});