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

**URL:** <https://community.weweb.io/t/how-to-update-a-chart-made-using-the-chart-js-plugin-i-had-weweb-ai-do-most-of-the-work-initially/17431>\
**Category:** How do I?\
**Tags:** chart\
**Created:** [March 25, 2025, 1:23am UTC](https://community.weweb.io/t/how-to-update-a-chart-made-using-the-chart-js-plugin-i-had-weweb-ai-do-most-of-the-work-initially/17431 "2025-03-25T01:23:50Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![heyjcm](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/heyjcm/32/13039_2.png) [@heyjcm](https://community.weweb.io/u/heyjcm)\
**Post date:** [March 26, 2025, 1:45pm UTC](https://community.weweb.io/t/how-to-update-a-chart-made-using-the-chart-js-plugin-i-had-weweb-ai-do-most-of-the-work-initially/17431/6 "2025-03-26T13:45:01Z")

</div>

To close off on this:

I attended [office hours on 25 March 2025](https://www.youtube.com/live/DvIaX__2LHU?si=sHg2BXHTheOTwlI0&t=2357) 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:

```auto
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
}]

```

1. For the Options binding here is my code:

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

```

1. The result is a chart that looks like this:  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d9e247682007d61fe746b5523fd40259dc989871.png)  
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.

---

_[View the full topic](https://community.weweb.io/t/how-to-update-a-chart-made-using-the-chart-js-plugin-i-had-weweb-ai-do-most-of-the-work-initially/17431)._