HighStocks Fixed Xaxis 30 minutes interval - highcharts

Question

I have been creating a Highstock chart and I am facing problem in fixing xAxis interval in date/time formatter code here according to live stock data on 30 minutes interval.
Here is the code of my chart:
Highcharts.setOptions({
global: {
timezoneOffset: 4 * 60
}
});
var dataObject = {
chart: {
renderTo: 'container',
defaultSeriesType: 'area',
width: '1280',
height: '640'
},
plotOptions: {
series: {
lineWidth: 1
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '<br/>%H:%M:%S',
minute: '<br/>%H:%M:%S',
hour: '<br/>%H:%M:%S',
day: '%Y<br/>%b-%d',
week: '%Y<br/>%b-%d',
month: '%Y-%b',
year: '%Y'
},
tickPositions:['09:00:000','12:00:00','15:00:00','18:00:00']
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
min: minRange,
max: maxRange,
tickInterval: 0.5,
title: {
text: 'Last',
margin: 40
}
},
series: [{
name: 'AAPL',
fillColor : {
linearGradient : {
x1: 0,
y1: 0.8,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
data: [[1440161106000,112.65],[1440161931000,112.65],[1440162841000,112.65],[1440163745000,112.65],[1440164584000,111.41],[1440164704000,111.11],[1440165543000,111.51],[1440166443000,110.96],[1440167345000,110.66],[1440168183000,109.29],[1440168300000,109.5],[1440169144000,109.17],[1440170038000,108.29],[1440170945000,108.92],[1440171784000,108.48],[1440171904000,108.61],[1440172743000,108.81],[1440173640000,108.6],[1440174544000,107.72],[1440175385000,108.03],[1440175503000,107.99],[1440176338000,108],[1440177245000,108.24],[1440178143000,108.4],[1440178983000,108.28],[1440179104000,108.21],[1440179915000,108.2],[1440180844000,108.3],[1440181743000,108.06],[1440182585000,107.71],[1440182705000,107.51],[1440183543000,107.5],[1440184444000,106.53],[1440185345000,106.08],[1440186184000,106.61]] }]
};
chart = new Highcharts.StockChart(dataObject),function(chart){
$('#container').bind("mousewheel",function(event,delta){
var x = event.originalEvent.wheelDelta /120;
console.log(x);
if (delta > 0) {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min + 12 * 3600 * 1000),(max - 12 * 3600 * 1000));
} else {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min - 12 * 3600 * 1000),(max + 12 * 3600 * 1000));
}
});
};
JSFiddle : jsfiddle.net/zubairsultan/cvnzkv0s/5

Answer 1

You can fix minTickInterval to 3600000 so your xAxis will be "hourly based":
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '<br/>%H:%M:%S',
minute: '<br/>%H:%M:%S',
hour: '<br/>%H:%M:%S',
day: '%Y<br/>%b-%d',
week: '%Y<br/>%b-%d',
month: '%Y-%b',
year: '%Y'
},
minTickInterval: 3600000
},
See your JSFiddle modified here: http://jsfiddle.net/cvnzkv0s/9/
Is that what you want ?