I am trying to put a bar chart inside one table field, I am using chart js to create chart and html for making table. The code is...

<div class="table"><table class="table table-borderless">
          <thead>
            <tr>
              <th scope="col">8</th>
              <th scope="col">Product Name</th>
              <th scope="col">Price</th>
              <th scope="col">Sold Items</th>
              <th scope="col">Revenue</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1.</th>
              <td>Flat 47"1080p</td>
              <td>$ 375</td>
              <td>2,212
                
              </td>
            </tr>
            <tr>
              <th scope="row">2.</th>
              <td>Laptop A10 460M</td>
              <td>$ 345</td>
              <td>2,084</td>
            </tr>
            <tr>
              <th scope="row">3.</th>
              <td>Sound Bar - 600 Watt</td>
              <td>$ 126</td>
              <td>2,018</td>
            </tr>
            <tr>
              <th scope="row">4.</th>
              <td>Flat 55"1080p</td>
              <td >$ 437</td>
              <td>1,921</td>
            </tr>
            <tr>
              <th scope="row">5.</th>
              <td>DSLR D520 18MP1</td>
              <td>$ 460</td>
              <td>1,917</td>
              
            </tr>
            
          </tbody>
        </table></div>
      </div>

I tried adding the chart by simply putting the code of my chart inside a td tag, like how we would add a value to the table. but its not working obviously... How can I add charts in one of the table fields using chart js?