title: Annotations not working with linear type in ChartJS 2
body: <p>I am trying to create a graph using ChartJS2 in one of our application; where we are using AngularJS 1.x along with RequireJS. So for that we have used ChartJs  2.7.0 </p>
  
  <p>When I try to implement our requirement, I'm facing an abnormal issue where </p>
  
  <ol>
  <li>When I define x axes type as linear then the annotation(vertical line) doesn't get displayed on the graph, as displayed in the attached image: <a href="https://i.stack.imgur.com/z3bpi.png" rel="nofollow noreferrer">when type: 'linear'</a></li>
  <li>And When I comment the line axes(X) type as linear then only annotation(vertical line) gets displayed but the graph doesn't get displayed at all as shown in the attached image: <a href="https://i.stack.imgur.com/KkiCy.png" rel="nofollow noreferrer">when commented the line type: 'linear'</a></li>
  </ol>
  
  <p>My HTML Code is as follows:</p>
  
  <pre><code>&lt;canvas style='height: 350px; width: 400px;' id="line" class="chart chart-line" chart-data="ourFixData.data"
      chart-labels="ourFixData.labels" chart-series="ourFixData.series" chart-options="ourFixData.options" chart-colors="ourFixData.colors"
      chart-dataset-override="ourFixData.datasetOverride"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>And my controller code is as follows:</p>
  
  <pre><code>'use strict';
  
  define(['app'], function (app) {
      app.register.controller("demoCtrl", function ($scope) {
          $scope.data = [];
  
          $scope.ourFixData = {};
  
          $scope.ourFixData.lineAtPoint = 2.20;
  
          $scope.ourFixData.colors = ['#399c5f', '#399c5f', '#399c5f'];
          $scope.ourFixData.labels = [0, 0.5, 1.5, 2.5, 5, 7.5, 12.5, 17.5, 27.5];
          $scope.ourFixData.series = ['Invites Available'];
  
          var dashArr = [,,,,4,5,6,7,8];
          var mainArr = [0,1,2,3,4,,,,];
          $scope.ourFixData.data = [
              dashArr,
              mainArr
          ];
  
          $scope.ourFixData.onClick = function (points, evt) {
              console.log(points, evt);
          };
  
          $scope.ourFixData.datasetOverride = [
              {
                  data: dashArr,
                  borderColor: '#399c5f',
                  borderDash: [2,4],
                  borderWidth: 2,
                  pointBackgroundColor : '#399c5f',
                  fill: false
              }, {
                  data: mainArr,
                  borderColor: '#399c5f',
                  borderWidth: 2,
                  pointBackgroundColor : '#399c5f',
                  fill: false
              }
          ];
  
          $scope.ourFixData.options = {
              title: {
                  fontFamily: "Open Sans",
                  text: "Invite Graph"
              },
              scales: {
                  xAxes: [
                      {
                          id: 'x-axis-0',
                          display: true,
  
                          // ***** This is where I'm facing issues
                          type: 'linear', // When commented annotation doesn't get displayed
  
                          position: 'bottom',
                          scaleLabel: {
                              fontFamily: "Open Sans",
                              display: true,
                              labelString: 'Turn-Over in Lakh Rupees'
                          }
                      }
                  ],
                  yAxes: [
                      {
                          id: 'y-axis-0',
                          display: true,
                          position: 'left',
                          scaleLabel: {
                              fontFamily: "Open Sans",
                              display: true,
                              labelString: 'Invites Available'
                          }
                      }
                  ]
              },
              annotation: {
                  drawTime: 'afterDatasetsDraw',
                  annotations: [
                      {
                          type: 'line',
                          id: 'hline',
                          mode: 'vertical',
                          scaleID: 'x-axis-0',
                          value: $scope.ourFixData.lineAtPoint, // data-value at which the line is drawn
                          borderWidth: 1,
                          borderColor: 'blue',
                          borderDash: [4,5],
                          display: true,
                          title: "Current",
                          enabled: true,
                          label: {
                              fontFamily: "Open Sans",
                              backgroundColor: "blue",
                              content: $scope.ourFixData.lineAtPoint + " Lacks",
                              enabled: true,
                              position: 'top'
                          }
                      }
                  ]
              }
          };
      });
  });
  </code></pre>
  
  <p>Any kind of help would be appreciated. Thanks in advance.</p>