Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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


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

JavaScript

Highcharts.chart('container', {

  chart: {
    events: {
      load() {
        const chart = this,
          yAxis = chart.yAxis[0],
          xAxis = chart.xAxis[0];

        xAxis.addPlotLine({
          value: (xAxis.max + xAxis.min) / 2,
          color: 'grey',
          width: 2,
          dashStyle: 'dash'
        });

        yAxis.addPlotLine({
          value: (yAxis.max + yAxis.min) / 2,
          color: 'grey',
          width: 2,
          dashStyle: 'dash'
        });

        chart.addSeries({
          type: 'polygon',
          data: [
            [xAxis.min, yAxis.min],
            [(xAxis.max + xAxis.min) / 2, yAxis.min],
            [(xAxis.max + xAxis.min) / 2, (yAxis.max + yAxis.min) / 2],
            [xAxis.min, (yAxis.max + yAxis.min) / 2],
          ],
          color: 'rgba(244, 198, 245, 0.5)',
          showInLegend: false,
          enableMouseTracking: false,
        })
      }
    }
  },
	
	yAxis: {
		min: 0
	},

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});