Highcharts x series group - highcharts

Question

Help me guys. I have much data with 6 months interval. How I can group it in X with moth interval?
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
plotOptions: {
spline: {
marker:{
enabled: false
}
}
},
series: [{
type: 'spline',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 3), 29.9],
[Date.UTC(2010, 0, 10), 29.9],
[Date.UTC(2010, 1, 1), 71.5],
[Date.UTC(2010, 1, 5), 29.9],
[Date.UTC(2010, 2, 1), 106.4]
]
}]
});
});
https://jsfiddle.net/L2g2uzz3/3/
For example, I want to receive January, February and March labels in X axe

Answer 1

I understand you would like to display in your xAxis the name of the month for each data.
Since you want to display only the month and you have many data on the same month, you have to play with 2 attributes of the Highcharts API: formatter & tickPositioner.
formatter: use this function when you want to format data. Here you want to display name instead of timeValue more info here
tickPositioner: use it in order to set the tick (label position on the axis). In our case, we may have multiple ticks and same labels so we have to filter them. see the Highcharts doc for more info
In the label property of xAxis, add:
labels:{
formatter: function(){
return monthNames[new Date(this.value).getMonth()];
}
},
tickPositioner: function () {
var positions = [];
var month = [];
for(var i = 0; i < this.series[0].xData.length; i++){
if(month.indexOf(new Date(this.series[0].xData[i]).getMonth()) == -1){
positions.push(this.series[0].xData[i]);
month.push(new Date(this.series[0].xData[i]).getMonth());
}
}
return positions;
}
},
Also don't forget to init the monthNames array
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
You can see your update FIDDLE
Let me know if it was helpful