How to update a chart made using the Chart.js plugin (I had WeWeb AI do most of the work initially)

[heyjcm]

Hi! I made the above scatter plot by calling an API endpoint from Xano, then creating an “On page load” workflow that fetches the collection, then transforms the data using custom javascript, and finally stores the data in a WeWeb variable that Chart.js likes.

I did all this with the help of WeWeb’s AI tool, I basically prompted it to do what I wanted and after some time back and forth the product you see in the screenshot came out of my effort.

The problem is that now I want to make changes to the chart (like even as simple as changing the axis labels) but can’t find where in WeWeb I’d do this.

I found this thread that seems to indicate that I can make changes, but for the life of me, I still can’t find where to do this! Datalabels using Chart.js plugin

ChatGPT was also of no help as it pointed me to a dead end since I can’t find the “Options field for general chart behavior”:

Thanks in advance for the help!

[sam1]

so looks like the ai made a component so if you click the edit in the top right you should then be able to look at the section in the image where you can change the labels

[heyjcm]

Thanks, @sam1! I tried that because that’s what Joyce’s video “Introduction to Charts in WeWeb” indicated, but I found that these are not actually bound to anything making me wonder how in the heck the labels are even there! I don’t even know where the data is bound to on this chart (it’s correct and as I expected, I just have no idea where the chart is pulling data from!). I’m perplexed!

[sam1]

Yeah that seems very strange I’m not sure sorry the AI must have some backend area its changing things. I would try messing around with those fields and seeing if you can get it to work using them instead of using the AI. maybe ask it to give you the details for those section so you can manually input them

[heyjcm]

Yeah, that’s what I suspect as well. The weird part is that there’s no indication of where that backend area is!

[heyjcm]

To close off on this:

I attended office hours on 25 March 2025 and was told that the WeWeb AI should have been updating things that I could get to, but Matthew and Flo concluded that there may be a bug in how the AI implemented my chart that I can’t get to and that I should create a ticket, which I did and is currently under investigation.

Instead of using the AI, I learned how Chart.js x WeWeb worked together and recreated a chart using the Chart.js component on my own (although it took a while ).

Here’s what I did:

1. Create a new Chart.js scatter plot component

2. Toggle off the option to include the built-in variables that come with the chart

3. Click on the chart

4. Click on Edit > options > Mode = Advanced > then I had to bind custom JavaScript to both Datasets and Options
   

   

5. For the Dataset binding here is my code:

return [{
  label: 'Case Tone by Date',
  data: variables[/* WeWeb case_tone_data variable*/'eefdd4b9-a95f-4836-9abd-52f9d5e1d5c4'],
  pointBackgroundColor: variables['eefdd4b9-a95f-4836-9abd-52f9d5e1d5c4'].map(d => d.backgroundColor),
  pointRadius: 5,
  showLine: false
}]

6. For the Options binding here is my code:

return {
    scales: {
      x: {
        type: 'category',
        labels: variables['eefdd4b9-a95f-4836-9abd-52f9d5e1d5c4'].map(d => d.x),
        title: {
          display: true,
          text: 'Date',
          font: {
            size: 20
          }
        },
        ticks: {
          maxRotation: 45,
          minRotation: 45
        }
      },
      y: {
        min: -1.2,
        max: 1.2,
        title: {
          display: true,
          text: 'Case Tone Score',
          font: {
            size: 20
          }
        },
        ticks: {
          stepSize: 0.2
        }
      }
    },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      callbacks: {
        title: function(context) {
          return context[0].raw.x;
        },
        label: function(context) {
          const y = parseFloat(context.raw.y);
          const displayY = Number.isInteger(y) ? y.toString() : y.toFixed(1);
          return `Case Tone: ${displayY}`;
        }
      }
    }
  }
}

7. The result is a chart that looks like this:
   
   
   
   Notice that the y-axis is a numeric value while the x-axis is a categorical (meaning the dates do not proportionally correspond to the tick marks and, in fact, there may be two of the same dates next to each other – I am trying to figure this out using luxon and chartjs-adapter-luxon (but it’s currently not working)

I hope that helps future people who want to work with Charts.