March 13, 2021

316 words 2 mins read



Open source CSS framework for data visualization.

repo name ChartsCSS/charts.css
repo link
language HTML
size (curr.) 894 kB
stars (curr.) 2335
created 2020-09-26
license MIT License


GitHub Version Minified Size License

Charts.css is an open source CSS framework for data visualization.

Visualization help end-users understand data. Charts.css help frontend developers turn data into beautiful charts and graphs using simple CSS classes.


Check the full documentation on



Use jsdelivr CDN:

<link rel="stylesheet" href="">

Or unpkg CDN:

<link rel="stylesheet" href="">

Package Manager

Install using npm:

npm install charts.css

Or using yarn:

yarn add charts.css


The data is structured using semantic HTML tags and styled using CSS classes which change the visual representation displayed to the end user.

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

  <caption> Front End Developer Salary </caption>

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

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


The framework offers developers flexibility. You choose what components to display and how to style them. Each component offers several CSS classes and CSS variables to customizes your style.

The key feature is the ability to customize everything using basic CSS. Frontend developers can target any HTML element and customize it. This philosophical guideline is what makes the framework so flexible, easy and fun to use.


Charts.css is licensed under the MIT license.

comments powered by Disqus