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.
npm install charts.cssVerified import paths — ran on the pinned version, not inferred.
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.
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.
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.
Always refer to the official documentation for the correct HTML structure and class names for each chart type. Validate your HTML for semantic correctness.
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.
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.
No dependency data recorded yet.