highcharts - Highstock Change date format dynamically on clicking range selector button -

i have set jsfiddle example http://jsfiddle.net/fqjuy/1/

i'm formatting 1d tab using following code snippet

 var df='%a, %b %e %i:%m %p';  tooltip : {             formatter : function(){                 var s=highcharts.dateformat(df, this.x);                 s+="<br/>";                 $.each(this.points, function(i, series){                     s += '<span style="color:' + this.series.color + '">' + this.series.name + '</span> : <b>'+ this.y.tofixed(2) +'</b><br/>';                 });                  return s;         }         } 

i want dynamically change date format 1h , tabs separately when click on tab. in advance.

you can selected button via:

var selected = this.points[0].series.chart.rangeselector.selected; 

then if define df way:

var df=['%i:%m %p','%a, %b %e %i:%m %p','%a, %b %e']; 

you can required tooltip format:

var s=highcharts.dateformat(df[selected], this.x); 

see: http://jsfiddle.net/fqjuy/2/

another solution range from:

var range = this.points[0].series.points[1].x - this.points[0].series.points[0].x 

and according range use specific format date.