Beautiful CSS only Charts with Charts.css
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
)
Year | Progress |
---|---|
2016 | |
2017 | |
2018 | |
2019 | |
2020 |
Here is the code
<link rel="stylesheet" href="/css/charts.min.css" /> <style> #bar-example-20 { height: 200px; max-width: 300px; margin: 0 auto; } </style> <table id="bar-example-20" 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>