[BUG] X-Axis not starting at 0, grid being squeezed as a result

[ProductOfAmerica]

Settings:

const chartOpts = {
  maintainAspectRatio: false,
  responsive: true,
  legend: {display: true},
  scales: {
    xAxes: [{type: 'time', ticks: {beginAtZero: true}}],
    yAxes: [{ticks: {beginAtZero: true}}]
  }
}

<div className="chart-wrapper" style={{height: 500 + 'px', marginTop: 40 + 'px'}}>
  <Line data={this.state.dataset} options={chartOpts} height={500}/>
</div>

Image:

Expected Behavior

Grids should fit into the pane, and X-Axis should start at 0.

Current Behavior

Grids do not fit perfectly in the pane, and end up being squashed at the end of the grid, which results in overlapping x-axis text. The X-Axis is also not starting at 0.

Environment

• Chart.js version: 2.6.0 (on NPM)
• Browser name and version: Google Chrome Version 59.0.3071.115 (Official Build) (64-bit)