Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

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

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

CSS

#container {
  max-width: 800px;
  margin: 0 auto;
}

JavaScript

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

  const top = yAxis.top + yAxis.height
  const height = 60

  const x1 = xAxis.toPixels(-0.5)
  const x2 = xAxis.toPixels(0.5)

  return {
    x: x1,
    y: top,
    width: x2 - x1,
    height
  }
}


Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      // Highlights the specialty labels at the bottom of the chart. Also see plotBands settings below
      load: function() {
        const chart = this
        const dimensions = rectDimensions(chart)

        let options = {
          fill: 'rgb(235, 236, 238, 0.5)'
        };
        
        this.rect1 = chart.renderer
          .rect()
          .attr(Object.assign(dimensions, options))
          .add();

      },

      /* redraw() {
        this.rect1.attr(rectDimensions(this))
      } */
    }
  },

  title: {
    text: 'Threshold is set to 100'
  },

  xAxis: {
    categories: ['Jan', 'Mar']
  },

  plotOptions: {
    series: {
      threshold: 2
    }
  },

  series: [{
    data: [10, -5],
    zones: [{
      value: 0,
      color: '#233b66'
    }]
  }]
});