How to put function in ChartJS data structures?

Question

I'm making a website with one graph that use ChartJS library. This chart display, on the website, all of the data available as default.

My goal is to let the visitors to choose a different number of data of the graph. So, I did one button at the top of the chart which, when a visitor click on it, must change the number of data displayed.

The problem is that ChartJS use a JSON object and I not succeed configure different behaviors in it.

    ...
      datasets: [
        {
          label: "Exemple",
          data: [
            { x: "Day1", y: 0 },
            { x: "Day2", y: 1 },
            { x: "Day3", y: 2 },
            { x: "Day4", y: 3 },
            { x: "Day5", y: 4 },
            ....
          ],
        ...

I tried to put an event on it, like :

         data: mybutton.addEventListener("click", () => {
                  [{x: "Day1", y: 0}]
               },

A function, like :

         data: myFunction(),

Even a variable with function into, like :

const myData = () => {
 // function
}

         data: myData,

Or an If else.

Nothing worked... Do you any idea ?

Answer 1

I found the solution by myself.

I put the JSON object in a function, put an AddEventListener("click", function()), targeted the part of the JSON to modify and added an update() at the end.

function chartFunction() {
   ....
   // data before
   datasets: [
       {
         label: "Exemple",
         data: [
           { x: "Day1", y: 0 },
   .....


       button.addEventListener("click", () => {
       (myChart.data.datasets[0].data = [...]).myChart.update();
       });
};

chartFunction();