JSFiddle - React, Tailwind, and code Playground

by methodfish

HTML

<script src='https://methodfish.com/Download/MFColumnDataBar/files/latest/js/mf-column-databar.js'></script><link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFColumnDataBar/files/latest/css/mf-column-databar.css'>


<table class='myTable' id='myTable'><tr>
        <th>Cat</th>
        <th>%</th>
    </tr>
<tr>
        <td>A</td>
        <td>50</td>
    </tr>
    <tr>
        <td>B</td>
        <td>25</td>
    </tr>
    <tr>
        <td>C</td>
        <td>13</td>
    </tr>
    <tr>
        <td>D</td>
        <td>12</td>
    </tr>
</table>

CSS

#myTable {
  width:100px;
}
#myTable tr td:first-child {
  width:1%;
}
#myTable tr td:last-child {
  text-align:right;
}

JavaScript

window.addEventListener("load", function () {
  const cdb = new MfColumnDataBar()
  document.querySelectorAll("#myTable tr td:last-child").forEach((cell) => {
    cdb.setColumnDataBar(cell, parseFloat(cell.innerText))
  })
})