i need to show a fixed line in my chart (like "Test Label" in the image):
So I added chartjs-plugin-annotation in to my Angular 11 project so I have those versions:
"chart.js": "^2.9.3",
"chartjs-plugin-annotation": "^1.0.2",
"ng2-charts": "^2.3.0",
Then I added to my options:
this.chartOptions = {
responsive: true,
scales: {
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [{
type: 'line',
drawTime: 'afterDatasetsDraw',
id: 'strip-line-1',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: tagvalue,
borderColor: 'red', // '#feaf00',
borderWidth: 3
}]
}
};
}
But no lines are showed... so I found that I have to register this, but it's not working
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Chart.pluginService.register(ChartAnnotation);
I got:
TS2559: Type 'typeof import("C:/.../node_modules/chartjs-plugin-annotation/types/index")' has no properties in common with type 'Plugin'.
Is it a chartjs-plugin-annotation bug? I need to change some dependecies?
Solved with:
npm install [email protected] as @LeeLenalee suggestes, after that:
If no lines are show, you can update the chart: