# Help with Chart JS Annotation Plugin

**URL:** <https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781>\
**Category:** How do I?\
**Tags:** chart\
**Created:** [October 6, 2023, 9:43pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781 "2023-10-06T21:43:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [October 6, 2023, 9:43pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/1 "2023-10-06T21:43:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 10, 2023, 8:56am UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/2 "2023-10-10T08:56:30Z")

</div>

Hi @archenia_jsanchez 👋

Alright, so one solution you could try is to use the npm plugin (still in beta) to add the Charts Annotation plugin:

 ![CleanShot 2023-10-10 at 10.35.35@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9bd260e0058ddfed2e4169ca554f14004a07cb9a.png)

For reference, I found the instance name thanks to @Alexis who helped me find it [here in the package’s documentation](https://unpkg.com/chartjs-plugin-annotation@2.0.0/dist/chartjs-plugin-annotation.js):

 ![CleanShot 2023-10-10 at 10.37.43@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/98ac9cfcd64b06d4ab461b780708d466e2fadefb.png)

I’m not 100% sure it will work but I _think_ then you could bind your datasets, options, and labels directly on the graph:

 ![CleanShot 2023-10-09 at 18.16.15@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/52fcd6211e9478680cc27c0d14604bdd180d7588.jpeg)

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](https://docs.weweb.io/plugins/extensions/charts.html) so perhaps this will be more straightforward in the future 😀

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [October 10, 2023, 12:30pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/3 "2023-10-10T12:30:22Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [October 10, 2023, 7:55pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/4 "2023-10-10T19:55:42Z")

</div>

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):

```auto
const current = 395;

return [{
    data: [current],
    backgroundColor: '#a6cee3',
    borderWidth: 1,
    borderColor: '#a6cee3',
    borderRadius: 24,
    barThickness: 12,
}]

```

Options (Javascript):

```auto
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',
      },
    },
  },
};

```

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 10, 2023, 8:05pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/5 "2023-10-10T20:05:18Z")

</div>

> [@jaredgibb](#):
>
> 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!

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!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 10, 2023, 8:07pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/6 "2023-10-10T20:07:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [October 10, 2023, 8:52pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/7 "2023-10-10T20:52:40Z")

</div>

Sure thing. I’ll check in with you Monday, if not discuss live in next week’s Office Hours.

---

<div class="post-metadata">

**Author:** ![wealthsyndy](https://avatars.discourse-cdn.com/v4/letter/w/48db29/32.png) [@wealthsyndy](https://community.weweb.io/u/wealthsyndy)\
**Post date:** [November 30, 2024, 7:45pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/8 "2024-11-30T19:45:45Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [December 2, 2024, 3:38pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/9 "2024-12-02T15:38:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wealthsyndy](https://avatars.discourse-cdn.com/v4/letter/w/48db29/32.png) [@wealthsyndy](https://community.weweb.io/u/wealthsyndy)\
**Post date:** [December 2, 2024, 8:09pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/10 "2024-12-02T20:09:38Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [December 4, 2024, 5:02pm UTC](https://community.weweb.io/t/help-with-chart-js-annotation-plugin/4781/11 "2024-12-04T17:02:26Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/42c3276afdf896399a7b0c9cf131e15fc4b883fd.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c3679bc2827a1249904f4dd394480ac3abc73256.png)

Anyhoo, would love to see what you end up building if it’s not too private, so please consider sharing when done 😃