score:13
I had some fun trying to get annotations working - in case you haven't already solved it, try this...
Change your imports statement to:
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Change ngOnInit()
to:
ngOnInit() {
let namedChartAnnotation = ChartAnnotation;
namedChartAnnotation["id"]="annotation";
Chart.pluginService.register( namedChartAnnotation);
this.simpleChart();
}
Lastly, I believe the annotation object is supposed to be a child of options, not plugins. Mine looks like this:
"options": {
"legend": {
"display": true
},
"scales": {
"xAxes": [{
"display": true
}
],
"yAxes": [{
"display": true,
"ticks": {
"min": 0,
"max": 40
}
}
]
},
"tooltips": {
"enabled": true,
"backgroundColor": "#eee",
"titleFontColor": "#000"
},
"annotation": {
"annotations": [{
"type": "box",
"xScaleID": "x-axis-0",
"yScaleID": "y-axis-0",
"yMin": 0,
"yMax": 15,
"xMin": 864,
"xMax": 1285,
"borderWidth": 1,
"backgroundColor": "rgba(200,60,60,0.25)",
"borderColor": "rgba(200,60,60,0.25)"
}, {
"type": "box",
"xScaleID": "x-axis-0",
"yScaleID": "y-axis-0",
"yMin": 30,
"yMax": 40,
"xMin": 864,
"xMax": 1285,
"borderWidth": 1,
"backgroundColor": "rgba(60,60,200,0.25)",
"borderColor": "rgba(60,60,200,0.25)"
}
]
}
}
Makes for a pretty graph :)
(except I got the colours bass ackwards! Oops!)
score:0
I have the same problem recently, I fixed it by registerPlugin under constructor.
Here is my solution:
- import the plugin to your component:
import * as annotations from 'chartjs-plugin-annotation';
- add this line to your constructor:
constructor(...) { BaseChartDirective.registerPlugin(annotations);}
- If you are using typescript you may need to extend the ChartOptions interface with annotation:
interface CustomizeChartOptions extends ChartOptions {
annotation?: any
}
- config your chartOptions with annotation
public barChartOptions: CustomizeChartOptions = {
// your other ChartOptions setting here
annotation: {
annotations: [
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '1 Dec',
borderColor: 'red',
borderWidth: 2,
label: {
content: 'CURRENT',
enabled: true,
position: 'top'
}
}
]
}
};
score:0
I know I am late, but, as of now (ng2-charts 3.0.11), these answers are not working as the API changed. The annotation configuration must now be in plug-ins. The annotation plug-in must be registered before being used. Here is what i found, from the examples: in app.module.ts:
import { NgChartsModule } from 'ng2-charts';
import { default as Annotation } from 'chartjs-plugin-annotation'
// ...
imports: [
//...
NgChartsModule.forRoot({
defaults: {},
plugins: [ Annotation ]
}),
// ...
and then, in your component.ts file:
chartOptions: ChartConfiguration['options'] = {
scales: {
// ...
},
plugins: {
annotation: {
annotations: [
{
type: 'line',
scaleID: 'y',
value: 16,
borderColor: 'green',
borderWidth: 6
},
]
}
},
}
score:4
To anyone having a TypeScript error saying that annotation isn't a ChartOptions property. After looking for an answer for a week or two I found a way to fix the issue.
Follow this path: node_modules/@types/chart.js/index.d.ts
Open index.d.ts, locate interface ChartOptions { and add this line. annotation?: Object; }
This is how I fixed my issue after every other solution failed.
score:7
As an adition of what Ade said. You can also add the plugin this way
import { ChartOptions } from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
this.chart = new Chart('canvas', {
...
options: {
...
annotation: { ... }
} as ChartOptions,
plugins: [ChartAnnotation]
});
Adding the {...} as ChartOptions
makes that TypeScript doesn't complain
Source: stackoverflow.com
Related Query
- chartjs-plugin-annotations not displayed in angular 5
- chartjs plugin datalabels does not show value on charts
- chart annotations not showing in Angular 2
- Chartjs not working with d3 from csv source
- Chartjs - first x-axis tick is not displayed
- Chartjs does not show annotations when x axis is of type time
- Chart.js Plugin Not Recognized as Options Property in Angular
- Ng2-charts crosshair plugin not working in Angular
- Angular 9 chartJs is not updating view after data update
- Fix ChartJS Values not Well Displayed
- ChartJs is not working in angular 4 with no errors
- Angular 6: chartjs value not updating with dynamic value update
- ChartJs does not render chart when binding canvas id in Angular
- Annotations are not displayed in Chart.js
- Chartjs plugin label in Angular app moving unexpectedly at hover
- Angular charts is not displayed
- Setting ChartJS plugin on vue-chartjs not working
- Tooltip is not displayed when using annotation in ChartJs
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Angular ChartJs does not show Data for multiple Charts
- 'require is not defined' error when attempting to use chartjs in javascript code
- Chart.js line from annotations plugin is not appearing
- angular chartjs not showing data properly
- angular directive is not working with chartjs
- ChartJs Angular directive - chart[chartType] is not a function
- When I try to include the chart.js and angular chartjs files, I get: ReferenceError: require is not defined
- Angular ChartJs colors option not working
- Chart in Angular not displayed until windows resize
- ReferenceError: Chart is not defined - chartjs
- ChartJs title not showing
More Query from same tag
- Chart.JS Starting at 00:00am and ending at 23:59pm
- Destroying the Div and its contents inside the jquery dialog when close button is clicked
- Chart.js xAxes Date Labels are altered based on screen width
- How to determine chart type inside 'chart.js' pluginservice
- How to unregister chartjs-plugin-labels globally?
- Why does one chart overlays another (chart.js)?
- How to make the last item on the chart js active?
- Configuring a Radar Chart w/Chart.js
- chart.js 2, animate right to left (not top-down)
- Set labels from array
- How to connect a charts.js chart to data
- If date not in queryset add default value
- Chartjs only showing dots, line not showing
- Display dataset values on bar ChartJs 2.1.6
- Unable to change size of Chart.js
- Annotation events not update the chart
- chart.js chart distorted with fixed width
- Different amount of label and data in Chart.js
- How can i create multiple components with pie charts?
- Invalid module name in augmentation. Module 'chart.js' resolves to an untyped module at '/src/chart.js', which cannot be augmented
- Chart.js sync legend toggle on multiple charts
- ReactJS - Labeling multi dimension array with chartJS-2
- How to color legend in angular-chart.js
- Chart.JS removing data stuck in loop
- Trying to insert another label for a piechart in ChartsJS
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- How to format x-axis time scale values in Chart.js v2
- How to call back one js file from another js file?
- Using associative PHP array in JS to later on use in chart generated via chart.js
- Adding image on the top of bar in chartjs