how can I show the data label on the dot of the graph? ng2chart - angular8

Question

https://valor-software.com/ng2-charts/#/LineChart
That is the link I followed for the line chart. I was able to show the data on the pie graph but it seems like different on this line chart. Like the graph below, how can I show data on the graph?
Update
I added a long line of code below. Typescript file can be also found in the the link above.
html
<div class="flex">
<div class="flex-item">
<div style="display: block;">
<canvas
baseChart
height="30vh"
width="70vw"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[plugins]="lineChartPlugins"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"
></canvas>
</div>
</div>
</div>
ts
import { Component, OnInit, ViewChild } from "#angular/core";
import { BaseChartDirective, Color, Label } from "ng2-charts";
import { ChartDataSets, ChartOptions } from "chart.js";
import * as pluginAnnotations from "chartjs-plugin-annotation";
#Component({
selector: "kt-chart1",
templateUrl: "./chart1.component.html",
styleUrls: ["./chart1.component.scss"],
})
export class Chart1Component implements OnInit {
public lineChartData: ChartDataSets[] = [
{
data: [180, 33, 200, 300, 333, 270, 200],
label: "Cost",
yAxisID: "y-axis-1",
},
];
public lineChartLabels: Label[] = [
"01/05/2020",
"02/05/2020",
"03/05/2020",
"04/05/2020",
"05/05/2020",
"06/05/2020",
"07/05/2020",
];
public lineChartOptions: ChartOptions & { annotation: any } = {
plugins: {
labels: {
fontColor: ["green", "white", "red"],
precision: 2,
textShadow: true,
render: function (args) {
return args.value + "(" + args.toFixed(1) + "%)";
},
position: "inside",
},
datalabels: {
formatter: () => {
return null;
},
},
},
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: "y-axis-1",
position: "right",
gridLines: {
color: "rgba(255,0,0,0.3)",
},
ticks: {
fontColor: "red",
},
},
],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-1",
value: "200",
borderColor: "red",
borderWidth: 2,
label: {
enabled: true,
fontColor: "orange",
content: "200",
},
},
],
},
tooltips: {
callbacks: {
label: (item, data) => {
console.log(item);
return "Cost: " + item.xLabel + " " + item.yLabel;
},
},
},
};
public lineChartColors: Color[] = [
{
// grey
backgroundColor: "rgba(148,159,177,0.2)",
borderColor: "rgba(148,159,177,1)",
pointBackgroundColor: "rgba(148,159,177,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(148,159,177,0.8)",
},
{
// dark grey
backgroundColor: "rgba(77,83,96,0.2)",
borderColor: "rgba(77,83,96,1)",
pointBackgroundColor: "rgba(77,83,96,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(77,83,96,1)",
},
{
// red
backgroundColor: "rgba(255,0,0,0.3)",
borderColor: "red",
pointBackgroundColor: "rgba(148,159,177,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(148,159,177,0.8)",
},
];
public lineChartLegend = true;
public lineChartType = "line";
public lineChartPlugins = [pluginAnnotations];
#ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
constructor() {}
ngOnInit() {
}
public randomize(): void {
for (let i = 0; i < this.lineChartData.length; i++) {
for (let j = 0; j < this.lineChartData[i].data.length; j++) {
this.lineChartData[i].data[j] = this.generateNumber(i);
}
}
this.chart.update();
}
private generateNumber(i: number) {
return Math.floor(Math.random() * (i < 2 ? 100 : 1000) + 1);
}
// events
public chartClicked({
event,
active,
}: {
event: MouseEvent;
active: {}[];
}): void {
console.log(event, active);
}
public chartHovered({
event,
active,
}: {
event: MouseEvent;
active: {}[];
}): void {
console.log(event, active);
}
public hideOne() {
const isHidden = this.chart.isDatasetHidden(1);
this.chart.hideDataset(1, !isHidden);
}
public pushOne() {
this.lineChartData.forEach((x, i) => {
const num = this.generateNumber(i);
const data: number[] = x.data as number[];
data.push(num);
});
this.lineChartLabels.push(`Label ${this.lineChartLabels.length}`);
}
public changeColor() {
this.lineChartColors[2].borderColor = "green";
this.lineChartColors[2].backgroundColor = `rgba(0, 255, 0, 0.3)`;
}
public changeLabel() {
this.lineChartLabels[2] = ["1st Line", "2nd Line"];
// this.chart.update();
}
}

Answer 1

Instead of using chartjs-plugin-annotation, you can draw the labels directly on the canvas using the Plugin Core API. It offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDraw hook and register it in the ngOnInit method as follows:
ngOnInit(): void {
Chart.pluginService.register({
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0']; // would be 'y-axis-1' in your code sample
ctx.save();
chart.data.labels.forEach((l, i) => {
var value = chart.data.datasets[0].data[i];
var x = xAxis.getPixelForValue(l);
var y = yAxis.getPixelForValue(value);
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillStyle = 'red';
ctx.fillText(value, x, y - 15);
});
ctx.restore();
}
});
}
Please have a look at this StackBlitz to see how it works.