charts.css
Charts.css is a dependency-free CSS framework for data visualization that turns semantic HTML tables into charts and graphs using utility classes and CSS variables. Instead of JavaScript or SVG/canvas rendering, it styles markup directly so charts are accessible, lightweight, and customizable with plain CSS.
Embed badge
[](https://opensources.dev/resource/chartscss)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
5/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
Our analysis
A pure-CSS framework that renders charts (bar, column, line, area, etc.) from semantic HTML table markup using utility classes and CSS custom properties for data values. No JavaScript, SVG, or canvas required.
When to use charts.css
Good for static or server-rendered charts where you want minimal payload, progressive enhancement, and accessible markup that degrades to a readable HTML table. Ideal for dashboards, reports, and content sites where data is known at render time and heavy interactivity isn't needed.
When not to
Reach for a JS charting library (Chart.js, D3, ECharts, ApexCharts) when you need rich interactivity, tooltips, zoom/pan, animated transitions on live data, complex chart types (scatter, heatmaps, geo), or precise axis/scale control beyond what CSS variables can express.
Strengths
- Zero dependencies and tiny footprint (~6kb gzipped)
- Accessible and SEO-friendly since data lives in real HTML tables that degrade gracefully
- Fully customizable with ordinary CSS — target any element, override variables
- No JS runtime, so it works with SSR/static sites and avoids hydration cost
Trade-offs
- Limited interactivity — tooltips, legends, and hover details require manual work
- Verbose markup; values must be normalized into calc(--size) ratios by hand or via templating
- Fewer chart types and less precise scaling/axis control than JS libraries
- Styling relies on CSS variable conventions that can be unintuitive for complex layouts
Maturity
A well-established, widely-starred project (1.x release, MIT licensed) with documentation site and CDN/npm distribution. Development cadence is relatively quiet, but the CSS-only approach means it's stable with little maintenance burden.
Charts.css
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.
No dependencies. 58.4kb minified size. 5.9kb gzipped file size!
Documentation
Check the full documentation on ChartsCSS.org.
Installation
CDN
Use jsdelivr CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
Or unpkg CDN:
<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
Package Manager
Install using npm:
npm install charts.css
Or using yarn:
yarn add charts.css
Usage
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>
<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>
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.
Questions
For questions and support please use the official forum on GitHub.
Liked Charts.css?
If you like the project, please consider to star the repo on GitHub.
License
Charts.css is licensed under the MIT license.