chart.js Multiple barchart in time scale won't display all

Question

Using Chart.js, i want to compare 2 datasets in a timescale. So i send data for each day, but here is my output

As you can see, for the very first and the very last data, i'm not able to see all my barchart. Very first will show the second dataset and very last will show the first dataset.

EDIT

Here is a WORKING CODEPEN

var options = {
    legend: {
        position: 'bottom'
    },
    hover: {
        mode: 'point',
        intersect: false
    },
    tooltips: {
        mode: 'x',
        intersect: false,
        callbacks: {
            title: function (tooltip, data) {
                return;
            },
            label: function (tooltip, data) {
                return ;
            },
            footer: function (tooltip, data) {
                return;
            }
        }
    },
    scales: {
        xAxes: [{
            id: 'timescale',
            type: 'time',
            unit: 'day',
            unitStepSize: 1,
            time: {
                displayFormats: {
                    'millisecond': 'DD MMMM YYYY HH:mm',
                    'second': 'mm:ss',
                    'minute': 'HH:mm',
                    'hour': 'HH:mm',
                    'day': 'DD MMM',
                    'week': 'DD MMM',
                    'month': 'DD MMMM',
                    'quarter': '[Q]Q - YYYY',
                    'year': 'YYYY',
                }
            },
            display: true,
            position: 'bottom',
            scaleLabel: {
                display: true,
                labelString: "Heure",
            }
        }],
        yAxes: [{
            id: 'consumption',
            type: 'linear',
            position: 'left',
            ticks: {
                beginAtZero: true
            },
            scaleLabel: {
                display: true,
                labelString: "Consommation",
            }
        }]
    }
}

var graph = new Chart(element, {
  type : 'bar',
  data : {
    labels : [],
    datasets : [{
      label: 'datasets1',
      type: 'bar',
      backgroundColor: Chart.helpers.color('#0000FF').alpha(0.5).rgbString(),
      borderColor: '#0000FF',
      unite: null,
      yAxisID: 'consumption',
      data: [{x: '2017-10-26T22:00:00.000Z', y:73.16},{x: '2017-11-27T22:00:00.000Z', y:36.16}]
    },{
      label: 'datasets2',
      type: 'bar',
      backgroundColor: Chart.helpers.color('#FF0000').alpha(0.5).rgbString(),
      borderColor: '#FF0000',
      unite: null,
      yAxisID: 'consumption',
      data: [{x: '2017-10-26T22:00:00.000Z', y:87.16},{x: '2017-11-27T22:00:00.000Z', y:24.16}]
    }],
  },
  options : options         
});

Answer 1

I've faced the same problem and fixed it by adding offset: true option to scales.xAxes

Here is your code with one new option https://codepen.io/anon/pen/yQqrVz?editors=0010 - now all bars are visible.

And here is my example https://jsfiddle.net/0bnmc4eg/3/

I found the solution in this conversation https://github.com/chartjs/Chart.js/pull/4545