charts.css · DocSearch MCP

What's inside charts.css

Install Charts.css via CDN
main
You can include Charts.css in your project directly via a CDN without installing any packages. Use either the jsDelivr or unpkg links in your HTML <head>.
https://github.com/chartscss/charts.css/blob/main/README.md
Install Charts.css via Package Manager
main
Install the library using npm or yarn to manage it as a dependency in your project.
```
npm install charts.css
# or
yarn add charts.css
```
https://github.com/chartscss/charts.css/blob/main/README.md

Use Charts.css for data visualization

main

Charts.css turns semantic HTML tables into charts using specific CSS classes. Data values are typically represented using the --size CSS variable on <td> elements to control the visual scale of the data point.

<table class="charts-css [ column ] [ show-primary-axis show-4-secondary-axes ] [ data-spacing-4 reverse-data ]">

  <caption> Front End Developer Salary </caption>

  <thead
    <tr
      <th scope="col"> Year </th
      <th scope="col"> Income </th
    </tr
  </thead

  <tbody
    <tr
      <th scope="row"> 2016 </th
      <td style="--size: calc( 40 / 100 );"> $ 40K </td
    </tr
    <tr
      <th scope="row"> 2017 </th
      <td style="--size: calc( 60 / 100 );"> $ 60K </td
    </tr>
    <tr
      <th scope="row"> 2018 </th
      <td style="--size: calc( 75 / 100 );"> $ 75K </td
    </tr
    <tr
      <th scope="row"> 2019 </th
      <td style="--size: calc( 90 / 100 );"> $ 90K </td
    </tr
    <tr
      <th scope="row"> 2020 </th
      <td style="--size: calc( 100 / 100 );"> $ 100K <br> 👑 </td
    </tr
  </tbody>

</table>