High Charts xAxis first label repeating on all ticks - highcharts

Question

I am using Highchart to create a chart. I am using xAxis type: 'datetime'
my first xAxis label is showing repeatedly. When i add tickInterval all graph ticks overlaps on one and another, So i used pointInterval instead. All graph options are working except first xAxis label which is showing repeatedly.
here is my options js:
$(function () {
$('#container').highcharts({
chart: { type: 'area'},
title: {text: null},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
pointInterval: 24 * 3600 * 1000,
labels: {
padding: 0,
step: 1,
formatter : function() {
var dayStr = Highcharts.dateFormat('%a ',this.value);
return dayStr;
}
},
startOnTick: true,
endOnTick: false
},
yAxis: {
min: <?php echo $this_min;?>,
max: <?php echo $this_max;?>,
title: { text:'mmHg' }
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{showInLegend: false, name:'diastolic', data:[[1464998400, 130], [1465171200, 125], [1465344000, 120], [1465430400, 122]]}, {showInLegend: false, name:'systolic', data:[[1464998400, 90], [1465171200, 85], [1465344000, 80], [1465430400, 82]]}],
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="font-weight:bold;">'+point.y +'<span>');
});
return s.join('/')+' mmHg';
},
shared: true
},
credits: { enabled: false}
});
});

Answer 1

I rewrote your code in jsFiddle.
The timestamp [1464998400, 1465171200, 1465344000, 1465430400] that you used in series is pointing to the same date which is Jan 18 1970 and that's why your x-axis label seems repeating. Check out my modified code #line#54 and the label is working fine now.

Answer 2

pointInterval is no longer available in the new version of Highchart. You should use tickInterval instead.