John Fred John Fred - 1 year ago 251
jQuery Question

Highstock Change tick interval on range selector change

I am unable to get the tickinterval to update in the following Jsfiddle:

Currently this:

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

Is not working.

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

Answer Source

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") {
         tickPositioner: function() {
           var positions = [],
             info =;
           for (var x = this.dataMin; x <= this.dataMax; x += 45 * 60 * 1000) {
  = info;
           return positions;
       }, false)

Here you can see an example how it can work:

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

Best regards.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download