title: Chart.js not updating multiple charts independently
body: <p>This is supposed to create to seperate charts. However when run they are identical and the values alternate between 0 and 1 for index, implying the index is changing (which confuses me idk why this would happen). Can anyone explain what it going on. I get the impression that somewhere i am mixing up the variables i use to reference the two charts, resulting in them being identical.</p>
  <pre><code>window.addEventListener(`load`, () =&gt; {
    Chart.defaults.plugins.tooltip.enabled = false;
    let data = {
      labels: (() =&gt; {
        let arr = [];
        for(let i = 0;i &lt; 31;i++) {
          arr.push((30 - i) * -2);
        }
        return arr;
      })(),
      datasets: [
        {
          label: `first`,
          data: (() =&gt; {let arr = [];for(let i = 0;i &lt; 31;i++){arr.push(Math.random())}return arr})(),
          borderColor: 'rgb(75, 192, 192)',
        },
        {
          label: `second`,
          data: (() =&gt; {let arr = [];for(let i = 0;i &lt; 31;i++){arr.push(Math.random())}return arr})(),
          borderColor: 'rgb(75, 0, 192)',
        }
      ]
    }
    let graphs = [];
    for(let i = 0;i &lt; 2;i++) {
      graphs.push(new lineGraph(data, data.labels.length));
    }
    setInterval(() =&gt; {
      for(let i = 0;i &lt; graphs.length;i++) {
        graphs[i].updateData({first: [i], second: [i]})
      }
    }, 1000)
  })
  
  function lineGraph(data, maxDataSize) {
    let div = document.createElement(`div`);
    div.classList.add(`module`, `module-line`);
  
    let canvas = document.createElement(`canvas`);
    canvas.classList.add(`canvas-line`);
    canvas.width = 200;
    canvas.height = 200;
  
    div.appendChild(canvas);
    this.div = document.body.appendChild(div);
    this.canvas = this.div.getElementsByClassName(`canvas-line`).item(0);
    this.ctx = this.canvas.getContext(`2d`);
    this.chart = new Chart(this.ctx, {
      type: `line`,
      data: data,
    })
    this.updateData = (data) =&gt; { // data =&gt; {datasetlabel: [data], ...}
      this.chart.data.datasets.forEach((dataset, index) =&gt; {
        let newData = data[dataset.label];
        if(newData) {
          if(dataset.data.length &gt;= maxDataSize) {
            for(let i = 0;i &lt; (dataset.data.length - maxDataSize) + newData.length;i++) {
              dataset.data.shift();
            }
          }
          dataset.data.push(...newData);
        }
      });
      this.chart.update();
    }
    return this;
  }
  </code></pre>