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

[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.