Chartjs mixed bar/line chart bars widths overlaps other columns - chart.js

Question

I have date chart with a line and a bar datasets.
The problem that I have is that the bar widths is overlapping other columns as the bar dataset will be normally zero.
You can see that the two bars are overlapping with June 4 column.
If I add a bar value in two consecutives days, it will adjust correctly the bar width.
Now the bar widths adjusts for each day column.
If there are more days the bars widths get worst:
You can see that in this chart, it seems that the bars widths overlaps with 4 days in the x axys.
You can check an example code here: https://codepen.io/anon/pen/eKdjay?editors=1010
Uncomment the js code at line 38 to see how the bars width adjusts.
This is the code I use to initialize the chart.
new Chart($('#chart'), {
type: 'bar',
data: {
labels: [],
datasets: [
{
label: "Reach",
data: reachData,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
borderWidth: 3,
fill: false,
lineTension: 0,
yAxisID: 'y-axis-right',
type: 'line'
}, {
label: "Interactions",
data: interactionsData,
borderColor: 'rgb(139, 195, 74)',
backgroundColor: 'rgb(139, 195, 74)',
borderWidth: 3,
fill: false,
xAxisId: 'x-axis',
lineTension: 0
}
]
},
options: {
bezierCurve : false,
tooltips: {
position: 'nearest',
mode: 'index',
intersect: false,
},
scales: {
xAxes: [{
type: 'time',
time: {
format: 'MM/DD/YYYY',
unit: 'day',
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-left',
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: "Reach",
fontColor: 'rgb(54, 162, 235)'
}
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-right',
ticks: {
beginAtZero: true,
},
gridLines: {
drawOnChartArea: false,
},
scaleLabel: {
display: true,
labelString: "Interactions",
fontColor: 'rgb(255, 99, 132)'
}
}]
}
}
});