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 chartjs-plugin-annotation@0.5.7 as @LeeLenalee suggestes, after that:
import * as ChartAnnotation from 'chartjs-plugin-annotation';
import Chart from 'chart.js';
ngOnInit(): void {
Chart.pluginService.register(ChartAnnotation);
}
// ...
this.myChartOptions = {
responsive: true,
scales: {
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left'
}
]
},
annotation: {
annotations: [
{
drawTime: 'afterDatasetsDraw',
id: 'hline',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 50, // My value
borderColor: 'red',
borderWidth: 3,
label: {
backgroundColor: 'red',
enabled: true
}
}
]
}
};
If no lines are show, you can update the chart:
import { BaseChartDirective } from 'ng2-charts';
// ...
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
// ...
this.chart.update();