Please make the js function return an html code that will be added as innerHTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Weekly Bar Chart (Colored + Animated)</title>
  <style>
    body{
      font-family: Arial, sans-serif;
      display:flex;justify-content:center;align-items:center;
      height:100vh;margin:0;background:#f9fafb;
    }
    .chart-container{
      width:400px;background:#fff;padding:20px;border-radius:8px;
      box-shadow:0 2px 8px rgba(0,0,0,0.1);overflow:hidden;
    }
    .bar-chart{
      display:flex;justify-content:space-between;align-items:flex-end;
      height:200px;border-left:2px solid #ccc;border-bottom:2px solid #ccc;
      padding-top:10px;
    }
    .bar-item{flex:1;display:flex;flex-direction:column;align-items:center;}
    .bar{
      width:40px;height:0;border-radius:4px 4px 0 0;
      transition:height .8s ease-out,background-color .3s ease;
    }
    .red    {background:#ff2222;}
    .yellow {background:#facc15;}
    .green  {background:#34d399;}
    .bar.red:hover    {background:#bb2626;}
    .bar.yellow:hover {background:#eab308;}
    .bar.green:hover  {background:#059669;}

    .bar-value{
      font-size:12px;margin-bottom:4px;color:#333;
      opacity:0;transition:opacity .2s ease .2s;
    }
    .bar-value.visible{opacity:1;}

    .bar-labels{
      display:flex;justify-content:space-between;
      margin-top:8px;
    }
    .bar-label{
      flex:1;text-align:center;font-size:14px;color:#555;
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <div class="bar-chart" id="barChart"></div>
    <!-- labels will be injected right here -->
  </div>

  <script>
    get_bar_chart();
  function get_bar_chart() {
    const days = ["Sat","Sun","Mon","Tue","Wed","Thu","Fri"];

    // generate a random integer between min & max (inclusive)
    function randInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // build an array of random values [70..100]
    const data = days.map(_ => randInt(80, 90));

    const chart      = document.getElementById('barChart');
    const container  = chart.parentNode;
    const labelRow   = document.createElement('div');
    labelRow.className = 'bar-labels';
    container.appendChild(labelRow);

    const maxVal  = Math.max(...data);
    const chartH  = 200;
    let   prevVal = null;

    data.forEach((val,i) => {
      const colour =
        i === 0        ? 'red'   :
        val >  prevVal ? 'red'   :
        val === prevVal? 'yellow': 'green';

      prevVal = val;

      const item  = document.createElement('div');
      item.className = 'bar-item';

      const spanVal = document.createElement('span');
      spanVal.className = 'bar-value';
      spanVal.textContent = val;

      const bar = document.createElement('div');
      bar.className = `bar ${colour}`;

      item.append(spanVal, bar);
      chart.appendChild(item);

      const lbl = document.createElement('span');
      lbl.className = 'bar-label';
      lbl.textContent = days[i];
      labelRow.appendChild(lbl);

      const finalH = (val / maxVal) * chartH + 'px';
      setTimeout(() => {
        bar.style.height = finalH;
        spanVal.classList.add('visible');
      }, 50 * i + 50);
    });
  }
  </script>
</body>
</html>