Adding lines with arrow heads inside the graph(chart.js- 2.9.4)

[namireddyvishal]

I haven't found any options in the document to add the arrow headed line

And another issue:
I have created a line using chart.js options:
annotations: {
type: 'line',
drawTime: 'afterDatasetsDraw',
borderColor: color,
mode: '',
scaleID: '',
value: null,
borderWidth: borderWidth,
borderDash: borderDash,
label: {
enabled: true,
content: '',
position: '',
xAdjust: null,
yAdjust: null,
rotatation: 90
// color: 'black',
backgroundColor: '#C0C0C0'
}
}

And added lines values:

setXBoxAnnotationValue(i, x1, x2, y) {
// horizontal line
this.myChart.options.annotation.annotations[i].xMax = x2;
this.myChart.options.annotation.annotations[i].xMin = x1;
this.myChart.options.annotation.annotations[i].yMax = y;
this.myChart.options.annotation.annotations[i].yMin = y;
}

setYBoxAnnotationValue(i, x, y1, y2) {
// vertical line
this.myChart.options.annotation.annotations[i].xMax = x;
this.myChart.options.annotation.annotations[i].yMax = y2;

this.myChart.options.annotation.annotations[i].xMin = x;
this.myChart.options.annotation.annotations[i].yMin = y1;

}

labels using:

setXLineAnnotation(i, labelPosition = null, yAdjust = null) {
this.myChart.options.annotation.annotations[i].mode = 'horizontal';
this.myChart.options.annotation.annotations[i].scaleID = 'y-axis-0';
this.myChart.options.annotation.annotations[i].label.position = labelPosition;
this.myChart.options.annotation.annotations[i].label.yAdjust = yAdjust;
}

setYLineAnnotation(i, labelPosition, xAdjust) {
this.myChart.options.annotation.annotations[i].mode = 'vertical';
this.myChart.options.annotation.annotations[i].scaleID = 'x-axis-0';
this.myChart.options.annotation.annotations[i].label.position = labelPosition;
// this.myChart.options.annotation.annotations[i].rotation = 90;
this.myChart.options.annotation.annotations[i].label.xAdjust = xAdjust;
}

Rotation is also not working
And the labels are floating when I zoom
How should I make it stable and stick to a data point on the graph