Help with Chart JS Annotation Plugin

Ask us anything How do I?
1

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.

1 Like
2

Hi @archenia_jsanchez :wave:

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
CleanShot 2023-10-10 at 10.35.35@2x1352×1004 73.7 KB

For reference, I found the instance name thanks to @Alexis who helped me find it here in the package’s documentation:

CleanShot 2023-10-10 at 10.37.43@2x
CleanShot 2023-10-10 at 10.37.43@2x2510×528 104 KB

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
CleanShot 2023-10-09 at 18.16.15@2x1920×931 114 KB

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

1 Like
3

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
4

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

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
6

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?

7

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

1 Like