Hey WeWeb Community! I’ve tried installing the Chart JS Annotation plugin but having trouble with it performing consistently. Sometimes it shows and sometimes it does not. Any advice on how to troubleshoot? Check out my Loom video for a full walkthrough of the problem.
Alright, so one solution you could try is to use the npm plugin (still in beta) to add the Charts Annotation plugin:
For reference, I found the instance name thanks to @Alexis who helped me find it here in the package’s documentation:
I’m not 100% sure it will work but I think then you could bind your datasets, options, and labels directly on the graph:
Could you give it a try and let us know how you get on?
PS: great question! It gave us an idea to improve the Charts plugin so perhaps this will be more straightforward in the future 
1 Like
Wait. So we can use chartJS plugins like this?!?! I just call it in, then the weweb plugin can use the chartJS plugin that is imported?
If so. That’s super cool and something I hadn’t considered at all!
1 Like
Hi Joyce,
Thanks for getting back to me so quickly and providing some more direction. I’ve made some progress but can’t seem to get the Annotation plugin working at all in this No Code route. Check out my walkthrough and let me now if you see something I’m not seeing.
Labels (Formula):
['']
Dataset (Javascript):
const current = 395;
return [{
data: [current],
backgroundColor: '#a6cee3',
borderWidth: 1,
borderColor: '#a6cee3',
borderRadius: 24,
barThickness: 12,
}]
Options (Javascript):
const goalCPC = 400;
const maxY = goalCPC * 1.25;
return {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
xMin: goalCPC,
xMax: goalCPC,
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
},
},
},
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
scales: {
x: {
beginAtZero: true,
categoryPercentage: 1.0,
barPercentage: 1.0,
grid: {
color: 'white',
borderColor: 'white',
tickColor: 'white',
},
maxRotation: 60,
minRotation: 60,
max: maxY,
},
y: {
display: false,
grid: {
display: false,
tickColor: 'white',
},
},
},
};
In theory yes… but the npm plugin is still very early so there’s a decent chance you’ll run into unforeseen issues.
If you do, please let us know so we can look into them and try to improve the plugin!
1 Like
Nice! Thanks a lot for taking the time to record a video. Really appreciate it!
I won’t have time to look into it this week because I’m attending a conference with a few people from the team and it’s a little advanced for me so I’ll need to take the time to wrap my head around your use case.
Would it be ok if I got back to you next week?
Sure thing. I’ll check in with you Monday, if not discuss live in next week’s Office Hours.
1 Like
I know it is an old thread, but has anyone figured this out? I added the NPM package, but after I am not sure what to do standard plugin structure in ChartJS is updated with the values but they do not show. Any help is appreciated 
It’s been a while so I can’t remember how things played out in the days following the last comment, but I can share that I have since abandoned the Annotation plugin.
After some digging I also decided to abandon annotate and abandon Chartjs for my more complicated graphs and use Apex Chart. After I learned we can install it with an NPM package it solved a lot more of my issues! Now I am on a hunt for a good geo rendering graph for US states.
Thanks for the follow up @archenia_jsanchez !
I’m a designer by trade, so one of the things I love about WeWeb is that I can make these decisions to pivot in real time—instead of propose a design then get pushback and have to redesign to the new constraints. I’ve not pushed ChartJS too much but am proud of 2 examples where I got more out of ChartJS than I thought was possible:
Anyhoo, would love to see what you end up building if it’s not too private, so please consider sharing when done 
1 Like