Charts.css

1.2.0 · active · verified Sun Apr 19

Charts.css is an open-source, pure CSS framework designed for creating data visualizations without requiring JavaScript. It transforms semantic HTML table structures into various chart types like bar, column, line, and pie charts using only CSS classes and variables. The current stable version is 1.2.0, released on July 21, 2025. The project demonstrates an active, albeit irregular, release cadence with multiple updates in recent years. Its key differentiators include its zero-dependency nature, minimal file size (60kb minified, 6kb gzipped), and high customizability through standard CSS, making it suitable for projects prioritizing performance and simplicity by leveraging existing browser rendering capabilities.

Common errors

```
Chart bars/columns are flat or incorrectly sized despite data values being correct.
```
cause The `--size` CSS variable on the `<td>` element is either missing, malformed, or has an incorrect `calc()` value.

fix Ensure each `<td>` element contains a `style="--size: calc( YOUR_VALUE / MAX_VALUE );"` attribute, where `YOUR_VALUE` is the data point and `MAX_VALUE` represents the 100% scale for your chart.
```
Axes, grid lines, or labels are not visible on the chart.
```
cause The necessary axis-display classes (e.g., `show-primary-axis`, `show-4-secondary-axes`) are missing from the main `<table>` element.

fix Verify that your `<table>` element includes the appropriate `charts-css` classes to enable the desired axes and grid lines as per the Charts.css documentation.

Warnings

gotcha Charts.css relies heavily on CSS variables (custom properties) and `calc()` for dynamic sizing and styling. This means older browsers, particularly Internet Explorer 11, will not render charts correctly without polyfills or fallback styles.
Fix: Ensure your target browser audience supports CSS variables. If not, consider progressive enhancement or provide fallback styles for critical chart components. caniuse.com is a good resource for checking browser support.
gotcha Specificity conflicts are common with pure CSS frameworks. If Charts.css styles are not applying as expected, it's likely due to higher specificity rules from other stylesheets or inline styles overriding them.
Fix: Inspect your CSS using browser developer tools to identify conflicting rules. Adjust the loading order of stylesheets, use more specific selectors for your custom styles, or use `!important` as a last resort, understanding its implications.
gotcha The data visualization relies entirely on correctly formatted HTML and CSS classes/variables. Any malformed HTML structure (e.g., `<td>` outside of `<tbody>` or missing `scope='row'` on `<th>`) or incorrect class names can lead to charts not rendering or behaving unexpectedly.
Fix: Always refer to the official documentation for the correct HTML structure and class names for each chart type. Validate your HTML for semantic correctness.

Install

npm install charts.css npm
yarn add charts.css yarn
pnpm add charts.css pnpm

Imports

Charts.css Stylesheet (CDN)

wrong:

<link href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

correct:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

This is the most common and recommended way to include Charts.css using a Content Delivery Network.

Charts.css Stylesheet (NPM/Local)
wrong:
```
@import 'charts.css';
```
correct:
```
@import 'charts.css/dist/charts.min.css';
```
When installing via npm, this syntax is used within a CSS or SCSS file to import the stylesheet. Ensure your build process resolves the `node_modules` path.
Charts.css Stylesheet (Local HTML)
wrong:
```
<link rel="stylesheet" href="charts.css/dist/charts.min.css">
```
correct:
```
<link rel="stylesheet" href="./node_modules/charts.css/dist/charts.min.css">
```
For direct local inclusion in an HTML file after `npm install`, ensure the path to `dist/charts.min.css` is correct relative to your HTML document.

Quickstart

This HTML snippet demonstrates how to create a basic column chart using Charts.css by structuring data within a semantic `<table>` element and applying specific CSS classes and inline CSS variables for visualization.

<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>

view raw JSON →