Highcharts Demo

author(s): Torstein Hønsi

by halloleo

HTML

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

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

JavaScript

let chart = Highcharts.chart('container', {
  xAxis: {
    plotBands: {
      from: 3,
      to: 5,
      label: { 
        text: 'Short Info',
        verticalAlign: 'middle',
      },
      events: {
        mouseover(e) {
          console.log("What to do here to modify label text? (Make it looooong.)")
        },
        mouseout(e) {
          console.log("And here we reset it")
        }

      }
    }
  },
  series: [{
    data: [4, 3, 5, 6, 2, 3, 2]
  }]

});

console.log(chart)