Charts.css is a really nice CSS data visualization framework. It comes with a 71,719 byte size CSS file and allows to dynamically convert tabular data to beautiful charts by just adding a few attributes (like class and scope)

Bar Example #20
YearProgress
2016
2017
2018
2019
2020

Here are the codes:

#bar-example {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}

<link rel="stylesheet" href="/css/charts.min.css" />
<link rel="stylesheet" href="/css/custom.css" />
...
<table id="bar-example" class="charts-css bar show-labels">
  <caption> Bar Example #20 </caption>
  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Progress </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"> 2016 </th>
      <td style="--size: 0.2;"></td>
    </tr>
    <tr>
      <th scope="row"> 2017 </th>
      <td style="--size: 0.4;"></td>
    </tr>
    <tr>
      <th scope="row"> 2018 </th>
      <td style="--size: 0.6;"></td>
    </tr>
    <tr>
      <th scope="row"> 2019 </th>
      <td style="--size: 0.8;"></td>
    </tr>
    <tr>
      <th scope="row"> 2020 </th>
      <td style="--size: 1;"></td>
    </tr>
  </tbody>
</table>