Annotations not working with linear type in ChartJS 2 - angularjs

Question

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
When I try to implement our requirement, I'm facing an abnormal issue where
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: when type: 'linear'
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: when commented the line type: 'linear'
My HTML Code is as follows:
<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"></canvas>
And my controller code is as follows:
'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'
}
}
]
}
};
});
});
Any kind of help would be appreciated. Thanks in advance.