Highstock Change tick interval on range selector c

Question

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 1

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.

Answer 2

You can, but that would be confusing to have text read "2hour" but actual time be 45 minutes. Why not add new button for this? In order for this to show there needs to be a minimum number of points but you can override with allButtonsEnabled. Here is what your rangeSelector could look like:

   rangeSelector: {
         allButtonsEnabled: true,
     buttons: [{
       type: 'hour',
       count: 2,
       text: '2Hour'
     }, {
       type: 'hour',
       count: 5,
       text: 'Week'
     }, {
       type: 'day',
       count: 1,
       text: '2Weeks'
     }, {
       type: 'minute',
       count: 45,
       text: '45 minutes'
     }],
     selected: 1,
     inputEnabled: false,
     buttonPosition: {
       x: 340
     },
     buttonSpacing: 10
   }

And here is a live demo of it.

Answer 3

Maybe this could help someone, I updated an existing Fiddle ;-)

xAxis: {
  events: {
    setExtremes: function(e) {
      if (typeof(e.rangeSelectorButton) !== 'undefined') {
       // alert('count: ' + e.rangeSelectorButton.count + 'text: ' + e.rangeSelectorButton.text + ' type: ' + e.rangeSelectorButton.type);
        if (e.rangeSelectorButton.type === "week") {
          this.update({              
            tickInterval: 86400000, //1000*60*60*24 = 1 day
            minorTickInterval: 86400000
          }, false)
        }
      }
    }
  }
}

Then you will have to adapt it to your case of course.