Please make the array values random between 70 to 100:

<!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 SECTION  *********/
    .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;
    }
    /* colour classes */
    .red    {background:#ff2222;}
    .yellow {background:#facc15;}
    .green  {background:#34d399;}
    /* hover darken */
    .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 .5s ease .5s;
    }
    .bar-value.visible{opacity:1;}

    /*********  LABEL SECTION  *********/
    .bar-labels{
      display:flex;justify-content:space-between;
      margin-top:8px;          /* distance from x-axis */
    }
    .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>
  (function () {
    const data = [120, 180, 90, 240, 200, 150, 220];
    const days = ["Fri","Sat","Sun","Mon","Tue","Wed","Thu"];

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

    const maxVal  = Math.max(...data);
    const chartH  = 200;
    let   prevVal = null;                                // for colour rule

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

      /* --------- build bar item ---------- */
      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);

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

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