I am trying to create a series of line chart dynamically and then update them once the data has been updated for a particular user in real-time.

I am running into difficulty because I can only get the most recent one to render.

I think this is because when the following code runs it overwrites the ctx variable and I lose the earlier charts.

I tried the following technique with dynamic variables so no two ctx variables would be the same, but it doesn't work.

Thanks in advance for your help.

window['ctx_'+userid] = document.getElementById("forceCurveGraph_"+userid).getContext("2d");
  
     window['myLineChart'+userid] = new Chart(window['ctx_'+userid], {
      type: 'line', data: {
        datasets: [{
          label: "Force Curve",
          data: forcecurvedata, backgroundColor: ['rgba(57,118,251, 0.8)']
        }],
        labels: labels
      }, options: {
        backgroundColor: ['rgba(40, 84, 141, 0.3)'],
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              max: graphMax
            }
          }],
          xAxes: [{
            ticks: {
              display: false
            }
          }]
        }
      }
    })