Charts.css: CSS-Only Data Visualization Without JavaScript

When to choose CSS over JavaScript charting

Charts.css suits projects where you control the data structure upfront and the chart is static or updates rarely. Server-side rendering of HTML with Charts.css eliminates the bundle cost and parsing overhead of JavaScript chart libraries. If your backend generates the chart HTML with the correct CSS classes and `--size` variables, the browser renders the chart instantly without additional JavaScript.

Stateless web applications, documentation sites, dashboard pages that load once, and printed HTML reports are all good fits. The lack of JavaScript means Charts.css works without dynamic JavaScript execution, making it safer for content security policy restrictions and faster for users on slower devices.

Replacing JavaScript charting libraries with CSS

JavaScript charting libraries like Chart.js add 30 to 150 kilobytes to your bundle depending on features. They require parsing, execution, and often DOM manipulation at runtime. Charts.css takes a fundamentally different approach: it styles semantic HTML tables with CSS classes and variables to render them as visual charts. The README states that it helps frontend developers turn data into beautiful charts and graphs using simple CSS classes.

The final output is 58.4 kilobytes minified and 5.9 kilobytes gzipped, including support for multiple chart types. No JavaScript framework or library is required. Animations, legends, axes, and styling are all achieved through CSS. The trade-off is interactivity: this is a solution for displaying static charts on initial page load or for charts that update infrequently.

How Charts.css works

Charts.css uses semantic HTML `table` elements with CSS classes and CSS variables. A table cell's height or width corresponds to its data value. The class name determines the chart type: `column` for vertical bar charts, `line` for line graphs, `pie` for pie charts, and others for radar, bar, and hybrid visualizations.

Here's a basic example:

<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>
  </tbody>
</table>

The `--size` CSS variable is the critical piece: it takes a calculated value between 0 and 1, and Charts.css uses it to scale the visual bar or line. Classes like `show-primary-axis` and `show-4-secondary-axes` control which axes display. Additional classes like `data-spacing-4` control spacing between data points, and `reverse-data` flips the chart direction. The README emphasizes that developers choose what components to display and customize them, with each component offering several CSS classes and CSS variables for fine-tuning appearance.

Installation and customization

Include Charts.css via CDN:

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

Or install locally via npm:

npm install charts.css

Or yarn:

yarn add charts.css

After loading the stylesheet, wrap your data in a table with class `charts-css` and add chart-type classes. All styling beyond that uses standard CSS: target any HTML element and customize it. The framework's philosophical guideline is that this flexibility makes it easy and fun to use, with developers choosing what components to display and how to style them.

Colors, fonts, spacing, and animation all respond to CSS variables and classes. No chart API or configuration object to learn. Each component offers several CSS classes and CSS variables, giving you both predefined options and the power to write custom CSS when needed. The README emphasizes this flexibility as central to the design philosophy.

Semantic HTML and accessibility

Charts.css renders charts using `table` elements with proper semantic markup. Table headers use `scope="col"` and `scope="row"` attributes. This structure preserves data meaning for screen readers and search engines. The README states that data is structured using semantic HTML tags, which distinguishes this approach from canvas- or SVG-based charting libraries that lose semantic structure.

Accessibility is built in: the table remains a proper data table even when styled as a chart. Users without CSS support see the underlying table.

Limitations: static charts and data binding

Charts.css works with static HTML. Changing a value requires modifying the HTML and reloading the page. There is no built-in data binding or reactive updates. If your data comes from a server or changes frequently, you will need to rebuild the HTML or use JavaScript to update the CSS variables, which partially defeats the purpose of avoiding JavaScript.

Charting with CSS is constrained by what CSS can express. Tooltips, click handlers, legends that respond to interaction, and other interactive features require either additional HTML markup or JavaScript. Charts.css provides the styling framework but not the interactivity layer.

The README does not document which chart types are supported or provide examples for all of them. The documentation at ChartsCSS.org is the source of truth, but the main README is sparse on details about limitations, capabilities, and best practices. Choosing a chart type requires visiting the full documentation site rather than learning from examples in the repository.

Editorial conclusion

Use Charts.css if you want to render static charts without JavaScript overhead and have full control over styling with CSS. Do not use it if you need interactive features, real-time data updates, or complex multi-series charts. Before adopting it, verify that your chart type is on the supported list and test that the table-based HTML structure fits your data model.

Frequently asked questions

Official sources

1. ChartsCSS/charts.css on GitHub
2. License: MIT
3. Project website
4. README
5. Releases