Chart.js: Line-chart not using full width

[bauerj]

I'm using Chart.js to display this chart:
jsfiddle :cloud:

This is what it looks like in my browser (Chrome 50.0.2661.102 m):

Why is there so much space on the left and right side (illustrated with arrows) of the chart?

I suspect the issue is related to using a time axis as it seems to be better when I switch to a different type.

Is there anything I can do to remove that margin?

[etimberg]

What I would do is set an explicit min point on the graph.

[bauerj]

Like this?

It doesn't really look better:

You didn't categorize this as a bug. Is this expected behaviour?

[etimberg]

Based on your fiddle, I don't know why there is a large space at the right edge of the graph. That needs to be investigated and fixed

The overlapping labels are unfortunately due to the minimum being set on the graph. There is already an existing issue to track this.

The padding on the left edge is caused by the length of the label. There is an open issue to track this as well.

[jlujan]

From my understanding, not setting round or not setting a min or max value causes the the first tick and last tick to be rounded down/up a tick unit which changes the overall scale length. In your case, specifying the unit unit: 'day' should get you there. See https://jsfiddle.net/7n9pwr6v/1/

[bauerj]

Thanks, that really looks much better now.

Are there any downsides in setting the unit manually?

[ktunador]

Causes of the problem are tick label display format(day) and rotation

Use the following xAxes configuration to fix them
see: https://jsfiddle.net/ezy1s1bo/5/

xAxes: [{
  type: "time",
  time: {
    tooltipFormat: "MMMM Do YYYY, HH:mm:ss",
    unit: 'minute',
    unitStepSize: '720',
    displayFormats: {
      minute: 'YYYY-MM-DD, HH:mm'
    }
  },
  ticks: {
    minRotation: 90
  }
}]

[etimberg]

Left side spacing fixed in #3508