Align dates on x axis on multiple Highcharts diagrams - highcharts

Question

I have three diagrams as the picture below. As you can see the dates align on the last two but on the top line chart the dates does not align with the other two. Can i control this in any way?
The code looks like this:
<div id="statisticsBGDiagramLastMonth" style="width:950px; height:250px;"></div>
<div id="statisticsInsulinDiagramLastMonth" style="width:950px; height:200px;">/div>
<div id="statisticsCarbsDiagramLastMonth" style="width:950px; height:200px;">/div>
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'statisticsBGDiagramLastMonth',
backgroundColor:'#F8F8FA'
},
title: {
text: 'Blodsocker'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 10,
min: 0,
title: {
text: null
}
},
tooltip: {enabled: true, shared: false,
formatter: function() {
var text = Highcharts.dateFormat('%Y-%m-%d ' + '%H:%M',
new Date(this.x)) + ' ' + this.series.name +
'<br>' + this.y + ' mmol/l';
return text;
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [{
name: 'BG',
data: #Model.LastMonthPatientBGValuesGraphData,
//zIndex: 1,
type: 'line',
shadow: false,
marker: {
enabled: false,
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
}
}]
});
});
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'statisticsInsulinDiagramLastMonth',
backgroundColor:'#F8F8FA'
},
legend: {
enabled: false
},
title: {text: 'Insulin'},
tooltip: {enabled: true, shared: false,
formatter: function() {
var text = Highcharts.dateFormat('%Y-%m-%d ',
new Date(this.x)) + ': ' + this.series.name +
'<br>' + this.y + 'E';
return text;
}
},
xAxis: {
type: "datetime"
},
yAxis: {
min: 0,
title: {
text: ''
},
tickInterval: 20,
stackLabels: {
enabled: true,
formatter: function(){
var val = this.total;
if (val > 0) {
return val;
}
return '';
},
style: {
fontSize: '9px',
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
}
},
plotOptions: {
//line: {dataLabels: {enabled: true, style: {fontSize: '8px'}, style: {textShadow: false}, allowDecimals: true, formatter: function() {return this.y + 'e'}}},
column: {stacking: 'normal', shadow: false, dataLabels: {
formatter:function() {
if(this.y != 0) {
return this.y;
}
},
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '8px'
}
}},
//series: {minPointLength: 0}
},
credits: { enabled: false },
series: [{pointWidth: 25, type: 'column', color: '#009ddf', name: 'Insulin Basal', allowDecimals:true, data: #Html.Raw(#Model.LastMonthPatientSortedBasalGraphData) }, {pointWidth: 25, type: 'column', color: '#A7CBED', name: 'Insulin Bolus', allowDecimals:true, data: #Html.Raw(#Model.LastMonthPatientSortedBolusGraphData)}]
});
});
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'statisticsCarbsDiagramLastMonth',
backgroundColor:'#F8F8FA'
},
legend: {
enabled: false
},
title: {text: 'Kolhydrater'},
tooltip: {enabled: true, shared: false,
formatter: function() {
var text = Highcharts.dateFormat('%Y-%m-%d ',
this.x) + ': ' + this.series.name +
'<br>' + this.y + ' gram';
return text;
}
},
xAxis: {
title: {text: 'Datum',align: 'high'},
type: "datetime",
allowDecimals: true,
},
yAxis: {
tickInterval: 100,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
formatter: function(){
var val = this.total;
if (val > 0) {
return val;
}
return '';
},
style: {
fontSize: '9px',
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {stacking: 'normal', shadow: false},
//series: {minPointLength: 0}
},
credits: { enabled: false },
series: [{ pointWidth: 15, type: 'column', color: '#666666', name: 'Carbs', allowDecimals:true, data: #Html.Raw(#Model.LastMonthFoodDataGraphData) }]
});
});

Answer 1

Just had this issue and solved it by setting
plotOptions: {
column: {
pointPlacement: 'on'
}
}