Strange behaviour on highcharts with two Y Axis - highcharts

Question

Im doing a chart with 2 series. One of the series is 'scatter' type and the other is 'column' type.
The problem i have, is that when i only have the scatter series, datetime labels on x axis, starts on the extreme left, but when i add the column series, is like all labels are pushed to the center, and i dont know why.
This is my fiddle examen: https://jsfiddle.net/cswpgq8u/7/
Highcharts.chart('container', {
chart: {
},
xAxis: {
type: 'datetime',
min: 1633057200000,
max: 1634353200000,
tickPositioner: function () {
var ticklist = [];
var extremes = this.getExtremes();
var startDate = extremes.min;//this.min;
var endDate = extremes.max; // this.max;
var diff = moment.duration(endDate - startDate);
if (diff.days() * 1 > 10)
increment = moment.duration(2, 'days').asMilliseconds();
else
increment = Math.ceil((endDate - startDate) / 10);
for (var timeline = startDate; moment(timeline) <= moment(endDate); timeline += increment) {
ticklist.push(timeline);
}
return ticklist;
},
maxPadding: 0,
minPadding: 0,
crosshair: {
enabled: true,
events: {
}
},
plotLines: [{
value: 1634266800000,
color: 'green',
width: 1,
dashStyle: 'ShortDash',
label: {
text: "AHORA", // Content of the label.
verticalAlign: 'bottom',
rotate: -90,
textAlign: 'right',
x: -2,
y: 30,
style: { color: '#6d6d6d', fontSize: '8px', fontWeight: 'bold', backgroundColor: 'white' }
},
}],
plotBands: null,
labels: {
formatter: function () {
var xMin = this.axis.min;
var xMax = this.axis.max;
var labeltick = Highcharts.dateFormat('%d. %B', this.value);
if ((moment(xMax).diff(moment(xMin), 'days')) < 10) {
labeltick = Highcharts.dateFormat('%d. %B %H:%M:%S', this.value);
}
return labeltick;
},
x: -10
}
},
yAxis:[
{
plotLines: [{
id: 'ln-' + 'idEje1',
color: '#9FA0A2',
width: 0,
value: 0,
dashStyle: 'longdashdot'
}],
labels: {
enabled:true,
x: -5,
y: -3,
},
title: {
enabled: false,
},
lineColor: 'lightgray',
lineWidth: 0,
tickInterval: 1
}, {
title: {
enabled: false,
},
lineColor: 'lightgray',
opposite: true,
labels: {
enabled: false,
x: -15,
y: -3,
},
lineWidth: 0,
tickInterval: 1
}
],
plotOptions: {
},
series: [
{
yAxis: 0,
type: 'scatter',
minPointLength: 1,
allowPointSelect: false,
stack: true,
data: [{
x: 1634007600000,
y: 2,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
},
{
x: 1633748400000,
y: 5,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
},
{
x: 1633143600000,
y: 2,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
},
{
x: 1633402800000,
y: 2,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
}],
name: 'On YAxis 0',
tooltip: {
pointFormatter: function () {
var point = this;
return "Valor TTF:" + ' <b>' + point.y + ' Días</b><br/>';
},
}
},
{
yAxis: 1,
type: 'column',
allowPointSelect: false,
minPointLength: 1,
data: [{
x: 1633708800000,
y: 5,
type: "duracion",
value: 5
},
{
x: 1633881600000,
y: 3,
type: "duracion",
value: 3
}],
name: 'On YAxis1',
tooltip: {
pointFormatter: function () {
var point = this;
return "Duración:" + ' <b>' + point.y + ' minutos</b><br/>';
},
},
pointWidth: 1
}
]
});
With 2 series
With one series
I think this is happening because Column Series. But dont know how to solve it.

Answer 1

The additional space is caused by the default calculation of pointRange for column series. You need to define it by yourself:
series: [{
type: 'scatter',
...
},
{
type: 'column',
pointRange: 1,
...
}
]
Live demo: https://jsfiddle.net/BlackLabel/hsrxtjaw/
API Reference: https://api.highcharts.com/highcharts/series.column.pointRange