Highcharts vertical lines

author(s): Torstein Hønsi

by jpeter06

HTML

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

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

JavaScript

var isZoom = false;
var myChart = Highcharts.chart('container', {

  chart: { zoomType: "xy",type: 'line',
        events: {
          	selection: function(event){ 
              isZoom = event.resetSelection ? false : true;
              myChart.update( {xAxis:{
              	tickInterval: isZoom ? 900000 : 3600000,
              	plotLines :
              	genPlotLines(1167609600000,1167609600000 + 7*1000*3600)}});
              return true;
          	}
          }
    },
		xAxis:{
				type: 'datetime',
        labels:{
        formatter: function() {        	
        	var h = new Date(this.value).getHours();
        	var min = ('0' + new Date(this.value).getMinutes()).slice(-2);
          	return isZoom ? h + ':' + min : h;
          }
        }          
       ,plotLines: genPlotLines(1167609600000,1167609600000 + 7*1000*3600)
	},
	tooltip:{
	formatter:function(){
	const startDate = Highcharts.dateFormat('%H:%M:%S', this.x)				
	return `Start date: ${startDate}  Value: ${this.y}`
	}
},
  series: [{
    name: 'TestData',
    data: [
            {x:1167609600000,y: 0.7537},
            {x:1167609600000 + 1*1000*3600,y: 1.7537},
            {x:1167609600000 + 2*1000*3600,y: 2.7537},
            {x:1167609600000 + 3*1000*3600,y: 3.7537},
            {x:1167609600000 + 4*1000*3600,y: 1.7537},
            {x:1167609600000 + 4.1*1000*3600,y: 1.8537},
            {x:1167609600000 + 5*1000*3600,y: 2.7537},
            {x:1167609600000 + 6*1000*3600,y: 3.7537},
            {x:1167609600000 + 7*1000*3600,y: 4.7537},
        ]
  }],
    title: {
        text: 'Zoom with Quarters'
    }

});


function genPlotLines(init,end){
  desp = 0;
  size = 900000;
  lines = []; console.log("isZoom PL", isZoom);
	while((init + desp * size) < end){
  	if(desp % 4 != 0 ){
      if(isZoom){ 
        lines.push({
         value:init + desp*size,
           dashStyle: 'dash'
        });
       }
    }else{
    	lines.push({
       value:init + desp*size,
      	 dashStyle: 'solid'
   ...