Chart js in embedded window shows in preview but not in browser

I would like to know that it can go wrong since when previewing a chart in a window embedded with Chart js in the editor (htmlcomponent) it shows fine but when I go to the published site it doesn’t do the chart, everything else is fine. I have not left the cache option on on the page and my browser seems to respond to other changes within the graphic such as the color.
This is the code from the editor:

            $w("#html1").postMessage(datosQuanta);
            $w("#html2").postMessage(item2 => [item2.x, item2.z]);
            $w("#html3").postMessage(item3 => [item3.x, item3.p1]); 

            $w("#html1").onMessage((event)=>{

             if(event.data.type === 'ready'){
 
             $w("#html1").postMessage(datosQuanta.map(item3 => [item3.x, item3.y]));

                }    
 
             });

              $w("#html2").onMessage((event)=>{

              if(event.data.type === 'ready'){
 
                   $w("#html2").postMessage(datosQuanta.map(item => [item.x, item.z]));

                }    
 
              });

              $w("#html3").onMessage((event)=>{

                if(event.data.type === 'ready'){
 
                   $w("#html3").postMessage(datosQuanta.map(item2 => [item2.x, item2.p1]));

                }    
 
              }); 
                          

This is the code of the htmlComponent:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gráfico Concentracion vs tiempo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="950" height="510"></canvas>
<script>

var ctx = document.getElementById("myChart");
let tiempo = [];
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: tiempo.map(o => o.x),
      datasets: [{
        label: 'Concentración(Quanta/m3)',
        data:  tiempo.map(o => o.y),
        fill: false,
        borderColor: "RoyalBlue"
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
    }
  });

  
  window.onmessage = function(event){

    if (event.data && Array.isArray(event.data)) {
     myChart.data.datasets[0].data = event.data;
     tiempo = event.data;
     myChart.update();
    }
    
  };

 
  function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
  }

</script>

anyone??