Xaxis time range does not start and end according to time data

[levekf]

Hello all,

I don't know if it is a bug or just a limitation but I have unwanted gap in my line graph.

Expected Behavior

My data must fill the xaxis range all the time.

Current Behavior

In some cases, my data does not fill the xaxis range.

Steps to Reproduce (for bugs)

https://jsfiddle.net/3w5bke8f/2/

Environment

• Chart.js version: 2.4.0
  It depends on the size of my screen :
  
  

[360disrupt]

I think it is adding +-1 value of your current measuring unit to the chart. I have currently the work around to round my dates to my scale:

backend

self.currentValue = {x: moment().startOf('minute').toDate(), y:newValue}

frontend chart options

        xAxes: [
          {
            scaleLabel: {labelString:'Time', display: true},
            id: 'x-axis-1',
            type: 'time',
            display: true,
            position: 'bottom',
            time: {
              unit:'minute',
              displayFormats: {
                'minute': 'hh:mm a'
              }
            }

          }
        ]

But I would also expect it to not add this two extra points on the x-axis.

[ghost]

I am also experiencing this problem. If my charts were static I'd just use a smaller unit, but since they are generated automatically on user input, I can't use this workaround. Is there any way to fix this?

[aaronbc]

I think this is a rounding issue. In your first image your unit scale is in hours so the min and max are on an hour boundary which is outside of your data. Your data starts at "2016-11-29T01:44:04.695Z" but the x-axis min is rounded to "2016-11-29T01:00:00.000Z". It'd be nice to be able to keep the hour unit but round to the nearest minute so that the min/max ticks don't have to start at the beginning of the hour.
When you increase the screen size your unit size changes to minutes and the graph displays properly.