Minimum tick interval (monthly) not working for datetime Highchart graph - datetime

Question

I am working with date-time highchart and I want x-axis tick interval to appear every month(jan-12, Feb-12, Mar-12). But If the data points are less than 4 then the x-axis label starts showing days of month as well (10 dec,24 dec, 7 jan). How do I make sure that even if there are less data points or the graph is zoomed, the tick interval are monthly. Here is the code for x-axis:
xAxis : {
type: 'datetime',
tickmarkPlacement:'on',
dateTimeLabelFormats: {
month: '%b-%y',
},
minRange:1*30*24*60*60*1000,
labels : {
rotation :'280',
align:'right',
style: {
fontFamily : 'Helvetica',
fontSize: '10px'
}
}
}
Thanks in Advance

Answer 1

As mentioned in my earlier comment, the easiest way to get what you've asked for is to set the tickInterval:
xAxis: {
type: 'datetime',
tickInterval:86400000 * 30
}
Example:
http://jsfiddle.net/jlbriggs/Lmfa5v55/
With this setup it doesn't matter what interval your data is in - in the example, it's daily - or if it's irregularly spaced or not.
It doesn't matter what level of zoom, or how many data points, you'll have a tick and label for each month within the bounds of the data.

Answer 2

Try put exact interval tick, and automatic day or month will appear.
You only need format label, after put ticks.
Options.xAxis.tickPositioner = function () {
const ticks = this.series[0].xData;
let result = [];
for (let index = 0; index < ticks.length; index++) {
result.push(ticks[index]);
}
return result;
};
and format xAxis
labels: {
format: "{value:%b-%Y}",
align: "center"
}
to tooltips
tooltip: {
valueSuffix: "",
valuePrefix: "",
xDateFormat: "%B - %Y",
valueDecimals: 0
},

Answer 3

The problem here is that not all the months have 30 days, is better not to set the tickInterval or the minRange. You could try to generate the months at your own, like:
startDate = Date.UTC(2012, 1, 1); //your starting date
// Set the xaxis value as first day of month
for (var i = 0; i < yourData.length; i++) {
var d = new Date();
d.setTime(startDate);
d.setMonth(d.getMonth() + i);
categories.push(d.getTime());
}
Or generate your own categories as shown on Highcharts demo page:
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec' //etc.
],
},
See a working demo of first option at: http://jsfiddle.net/gjkde5np/1/
Extracted from: How to set PointIntervals per month in HighChart
You could also check the code from highcharts "Time series with irregular intervals" http://www.highcharts.com/demo/spline-irregular-time . Here they use the [Date.UTC(1970, 9, 21), 0], [Date.UTC(1970, 10, 4), 0.28]