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
- Unable to plot JSON to chartJS
- React.js made a Custom Line Chart
- How to customize the title and tooltip in ux-chartjs?
- Calculate value in tooltip in ChartJS
- Remove all borders from my chart in angular-chart-js
- How to shrink the height and increase the line width of a custom Chartjs horizontal line?
- How to add an array to my line data?
- How can I change the legend label without affecting my tooltip label?
- Chart.JS not working in Xpages, chart not defined errror
- Change tool-tip direction in react-chartjs2
- Chart.js stacked bar chart iterate over datasets
- How to add overlay color to chart.js pie chart segment?
- how to add data from database to chartjs-plugin-streaming
- How to get the index of the barchart label that has been clicked with react-chart js-2?
- Modifying values in a radar chart.js based on user input
- angularjs chartjs legend undefined
- How to add an on click event to my Line chart using Chart.js
- How to change the label color in chart.js?
- ChartJS xAxis time formats don't change for days
- Javascript: Showing bedtimes in Chart.js
- How to add text inside scatter plot using Chart.js?
- React Js and Chart Js (Line Chart)
- Create a pie chart using an array from a data table in chart.js
- Chart.js - Connect two datasets in a line chart at same y value
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- Use chart.js with freemarker tamplates
- chart.js renders outside div and canvas
- Chart.js with JSON data error
- Add information on y Chart Js
- Chart Js invisible horizontal bar