Closed godind closed 6 months ago
@godind there are never stupid questions..
The approach is correct but I have the feeling that lineChartOptions
are the options you use to configure the chart.
That options are used only to initialize the chart.
If you need to change a live
chart, you should use chart.options
.
In your code, you should use the following:
this.chart?.options.plugins.annotation.annotations.meanLine.value = 50;
this.chart?.update('none');
Codepen: https://codepen.io/stockinail/pen/LYvVPPK
Another options could be to set the value
as scriptable options (in chart init):
plugins: {
annotation: {
annotations: {
meanLine: {
type: 'line',
scaleID: 'y',
value: (context) => {...... you code.... }, // <- this scriptable options is invoked at each chart update
borderColor: 'red',
drawTime: 'beforeDatasetsDraw',
label: {
display: true,
content: "Dataset Mean value"
}
}
}
}
}
Let me know if it is working for you as well
Wonderful. Thank you so much!!! I get this error. Probably related to Typescript types but not sure how to fit it!
I've also tried as a Record approach:
this.chart?.options.plugins.annotation.annotations["meanLine"].value = 10;
no luck
afaik you could NOT use ?.
left of the equal during an assignment even if I'm not an Angular expert
I also made sure to include the following:
import { Chart, ChartConfiguration, ChartData, ChartType } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import 'chartjs-adapter-date-fns';
constructor() {
Chart.register(annotationPlugin);
}
I also tried this with no luck:
let x: LineAnnotationOptions = this.chart?.options.plugins.annotation.annotations[1];
x.value = 100;
Sorry to shoot at you like this ;)
afaik you could NOT use
?.
left of the equal during an assignment even if I'm not an Angular expert
I tried removing it but still no luck. With ts-ignore it compiles and runs but the value is not updated.
//@ts-ignore
this.chart.options.plugins.annotation.annotations.meanLine.value = 100;
this.chart?.update('none');
Found the problem. It's with ng2-chart's type definition. It works fine in plain js.
Sorry for the trouble. Thank you!
Found the problem. It's with ng2-chart's type definition. It works fine in plain js.
Sorry for the trouble. Thank you!
@godind No problem, no need to be sorry!! I had planned to do a test, installing an Angular app and I'll do anyway later. Glad to hear that's working!
Hi,
Probably a stupid question but I can't seem to be able to dynamically change the line value. I am dynamically pushing data as it coming on and want to have the annotation line adjust with the mean value of the growing dataset.data:
Using Angular and charts.js v4.4.2
tried a few things...