title: Chartjs: Align first tick in first index of axis
body: <p>I'm trying to show usage in chartjs time scale, with a date range. But somethimes, the data are extensive (350+). In that cases, the start of y-axis grid lines is not align with the first tick of x-axis. I have searched for solution, but people say that they have already solved this. Why this still ocurs with me?
  <a href="https://i.stack.imgur.com/FEYlM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FEYlM.png" alt="enter image description here"></a>
  I'm using the latest chartjs version (2.6), and the code similar as the follow.</p>
  
  <pre><code>var config= {
          type: 'line',
          data: {
              datasets: [{
                  label: 'CPU',
                  fill: true,
                  pointHitRadius: 25,
                  backgroundColor: "rgba(75,192,192,1)",
                  borderColor: 'rgba(75,192,192,1)',
                  pointBorderColor: 'rgba(75,192,192,1)',
                  pointBackgroundColor: '#fff',
                  borderWidth: 1
              }]
          },
          options: {
              scaleBeginAtZero: false,
              title: {
                  display: true,
                  text: 'Uso de CPU'
              },
              hover: {animationDuration: 100},
              layout:{
                  padding: {left: 50, right: 50, top: 50, bottom: 50 }
              },
              legend:{display: false },
              animation: {duration: 500 },
              scales: {
                  xAxes: [{
                      type: 'time',
                      ticks: {
                          maxRotation: 0,
                          autoSkip: true,
                          maxTicksLimit: 12,
                          bounds: "data",
                      },
                      time: {
                          round: 'minutes',
                          displayFormats: {
                              'millisecond': 'HH:mm',
                              'second': 'HH:mm',
                              'minute': 'HH:mm',
                              'hour': 'HH:mm',
                              'day': 'DD [de] MMM [de] YY',
                              'week': 'DD [de] MMM [de] YY',
                              'month': 'DD [de] MMM [de] YY',
                              'quarter': 'DD [de] MMM [de] YY',
                              'year': 'DD [de] MMM [de] YY',
                          },
                          tooltipFormat: 'D MMM YYYY H:mm'
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          beginAtZero: true,
                          stepSize: 25,
                          suggestedMin: 0,
                          suggestedMax: 100,
                          callback: function(value, index, values) {
                              return value+"% ";
                          }
                      }
                  }]
              }
          }
      };
      var rows = {"rows":[{"x":"2017-08-25T10:16:54-03:00","y":21}]}; //continues 350+
      var canvas = $('&lt;canvas&gt;', {id: element});
      var ctx = canvas[0].getContext('2d');
      window.myChart = new Chart(ctx, config);
      window.myChart.data.datasets[0].data = rows;
      window.myChart.update();
  </code></pre>
  
  <p>Any help will be apreaciated.</p>