Chart.js: time in x axis displayed incorrectly

[jaipradeesh]

Chart.js version : 2.4.0
Chart type: bar

   xAxes: [{
       stacked: true,
       gridLines: {
           display: false
       },
       position: 'bottom',
       type: 'time',
       time: {
           displayFormats: {
               day: 'MMM DD'
           },
           unit: 'day'
       },
       ticks: {
           stepSize: 0,
       }
   }]

Date array (X axes)

[2016-10-19T00:00:00Z,2016-10-20T00:00:00Z,2016-10-21T00:00:00Z,2016-10-22T00:00:00Z,2016-10-23T00:00:00Z,2016-10-24T00:00:00Z,2016-10-25T00:00:00Z,2016-10-26T00:00:00Z,2016-10-27T00:00:00Z,2016-10-28T00:00:00Z,2016-10-29T00:00:00Z,2016-10-30T00:00:00Z,2016-10-31T00:00:00Z,2016-11-01T00:00:00Z,2016-11-02T00:00:00Z,2016-11-03T00:00:00Z,2016-11-04T00:00:00Z,2016-11-05T00:00:00Z,2016-11-06T00:00:00Z,2016-11-07T00:00:00Z,2016-11-08T00:00:00Z,2016-11-09T00:00:00Z,2016-11-10T00:00:00Z,2016-11-11T00:00:00Z,2016-11-12T00:00:00Z,2016-11-13T00:00:00Z,2016-11-14T00:00:00Z,2016-11-15T00:00:00Z,2016-11-16T00:00:00Z,2016-11-17T00:00:00Z]

Value array (Y axes)

[1, 2, 0, 20, 0, 0, 39, 2, 1, 0, 0, 0, 1, 3, 4, 3, 2, 0, 3, 14, 44, 55, 1, 0, 1, 0, 0, 1, 0, 1]

Actual result:

Issue: Date array gets left shifted with one value

When type and time keys are removed, it works as expected but, the results are displayed as is in the date array. The ISO -> MMM DD conversion is doing something weird.

[etimberg]

Do you have a test fiddle that reproduces this?

[dalehalliwell]

Experiencing the same issue as OP with time scale x-axis, labels are shifted to the left and some bars overlap

[stefanfisk]

Here is a fiddle which reproduces the issue: http://jsfiddle.net/najcawjv/

Sorry for the weird code, it was a quick copy-paste-cleanup...

[etimberg]

Was looking at the test fiddle above. The round setting isn't playing nice with the min and max settings.

round will round the values to the unit specified, but the min and max are not rounded. This has the effect of moving the left edge of the axis to after the first data point

[linuradu]

I had an overlapping issue, and I've fixed it adding:

options: {
    scales: {
      xAxes: [
        {
          type: 'time',
          distribution: 'series'
        }
      ]
    }
  }

Before:

After: