I display a set of charts in <canvas class="evaluator_chart"></canvas>

for ($i = 0; $i < count($eval_list); $i++) {
   echo '<canvas class="evaluator_chart"></canvas>';
}

and try to change their content/data dynamically by clicking on links.
I am unable to properly destroy the chart object. Either all charts are displayed but the data is not changed, or the data is changed but not all charts are displayed (see sample below).

    const myCanvas = document.querySelectorAll('.evaluator_chart');

    for (let i = 0; i < myCanvas.length; i++) {
        // split chart data by individual charts
        const data   = [];
        const labels = [];
        for (let x = i; x < by_eval_values.length; x+= myCanvas.length) {
            labels.push(by_eval_labels[x]);
            data.push(by_eval_values[x]);
        }
        const dataByEval = {
           ...
        };

        // destroy previous chart object
        if (window.byEval) window.byEval.destroy();

        // create chart object
        let ctx = myCanvas[i].getContext('2d');
        window.byEval = new Chart(
            ctx, {
            type: 'bar',
            data: dataByEval,
            options: options
        });
    }

Not sure whether the whole construction is correct. Thanks in advance for the tips.