Как внести данные в диаграмму из таблицы

у меня есть диаграмма на Chatr.js. В data лежит значение количества. Как сделать так, чтоб это значение бралось из таблицы HTML?

вот код, будет id или class например у красных элементов, когда пытаюсь сделать не через ручной ввод, то красный элемент пропадает

Код

<table id="filteredRequests" border="1">
    <caption>Таблица отфильтрованных заявок</caption>
    <tbody>
      <tr>
        <th>Дата</th>
        <th>Вид заявки</th>
        <th>Количество заявок</th>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>2024-03-01</td>
        <td>Красная</td>
        <td id="red">2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>2024-03-01</td>
        <td>Зеленая</td>
        <td>2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>2024-03-02</td>
        <td>Серая</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2024-03-02</td>
        <td>Красная</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
  <div>
    <canvas id="stackedChartID"></canvas>
  </div>

var red = document.getElementById("red");


    var myContext = document.getElementById(
      "stackedChartID").getContext('2d');
    var myChart = new Chart(myContext, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Колличество',
          backgroundColor: "red",
          data: red,
        }, {
          label: 'Колличество',
          backgroundColor: "gray",
          data: [14, 2, 10, 6, 12, 16],
        }, {
          label: 'Колличество',
          backgroundColor: "green",
          data: [17, 16, 4, 11, 8, 9],
        }],
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: 'Диагрмма зависимостей'
          },
        },
        scales: {
          x: {
            stacked: true,
          },
          y: {
            stacked: true
          }
        }
      }
    });