John Fred John Fred - 12 days ago 6
jQuery Question

Highstock Change tick interval on range selector change

I am unable to get the tickinterval to update in the following Jsfiddle: https://jsfiddle.net/rarwarrar/5xgoqjst/4/

Currently this:

xAxis: {
events: {
setExtremes: function(e) {
if (e.rangeSelectorButton.text === "2Hour") {
$('#chart').highcharts().xAxis[0].tickInterval= 2700000 //45 min
$('#chart').highcharts().redraw()
}
}
}
},


Is not working.

For instance can the tick interval be set to every 45 minutes once '2hour' is clicked?

Answer

You can use tickPositioner function for changing your tick positions after you set your extremes. You can use Axis.update() for updating tickPositions of this axis:

   setExtremes: function(e) {
     if (e.rangeSelectorButton.text === "2Hour") {
       this.update({
         tickPositioner: function() {
           var positions = [],
             info = this.tickPositions.info;
           for (var x = this.dataMin; x <= this.dataMax; x += 45 * 60 * 1000) {
             positions.push(x);
           };
           positions.info = info;
           return positions;
         }
       }, false)
     }
   }

Here you can see an example how it can work: https://jsfiddle.net/5xgoqjst/5/

You should be able to change your tickPositions on different ranges as well.

Best regards.