Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

function rectDimensions(chart) {
  const xAxis = chart.xAxis[0]
  const yAxis = chart.yAxis[0]

  const top =  yAxis.top//chart.yAxis[0].getExtremes().min + 30;//yAxis.top + yAxis.height
  const height = 60
debugger
  const x1 = 100//xAxis.toPixels(-0.5)
  const x2 = 150//xAxis.toPixels(0.5)
   

  return {
    x: x1,
    y: top,
    width: 500,
    height
  }
} 
Highcharts.chart('container', {
   
     chart: {
       renderTo: 'container',
       
    
        
    },
     
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
    
}, function(chart) {

 
        const dimensions = rectDimensions(chart)

        let options = {
          fill: '#FCFFC5'
        };
         
        this.rect1 = chart.renderer
          .rect()
          .attr(Object.assign(dimensions, options))
          .add();

});