{"id":10621,"library":"charts.css","title":"Charts.css","description":"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.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/ChartsCSS/charts.css","tags":["javascript","css","html","css-framework","charts","chart","scss","ui-component"],"install":[{"cmd":"npm install charts.css","lang":"bash","label":"npm"},{"cmd":"yarn add charts.css","lang":"bash","label":"yarn"},{"cmd":"pnpm add charts.css","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the most common and recommended way to include Charts.css using a Content Delivery Network.","wrong":"<link href=\"https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css\">","symbol":"Charts.css Stylesheet (CDN)","correct":"<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css\">"},{"note":"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.","wrong":"@import 'charts.css';","symbol":"Charts.css Stylesheet (NPM/Local)","correct":"@import 'charts.css/dist/charts.min.css';"},{"note":"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.","wrong":"<link rel=\"stylesheet\" href=\"charts.css/dist/charts.min.css\">","symbol":"Charts.css Stylesheet (Local HTML)","correct":"<link rel=\"stylesheet\" href=\"./node_modules/charts.css/dist/charts.min.css\">"}],"quickstart":{"code":"<table class=\"charts-css column show-primary-axis show-4-secondary-axes data-spacing-4 reverse-data\">\n  <caption> Front End Developer Salary </caption>\n  <thead>\n    <tr>\n      <th scope=\"col\"> Year </th>\n      <th scope=\"col\"> Income </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th scope=\"row\"> 2016 </th>\n      <td style=\"--size: calc( 40 / 100 );\"> $ 40K </td>\n    </tr>\n    <tr>\n      <th scope=\"row\"> 2017 </th>\n      <td style=\"--size: calc( 60 / 100 );\"> $ 60K </td>\n    </tr>\n    <tr>\n      <th scope=\"row\"> 2018 </th>\n      <td style=\"--size: calc( 75 / 100 );\"> $ 75K </td>\n    </tr>\n    <tr>\n      <th scope=\"row\"> 2019 </th>\n      <td style=\"--size: calc( 90 / 100 );\"> $ 90K </td>\n    </tr>\n    <tr>\n      <th scope=\"row\"> 2020 </th>\n      <td style=\"--size: calc( 100 / 100 );\"> $ 100K <br> 👑 </td>\n    </tr>\n  </tbody>\n</table>","lang":"html","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.6.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.6.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `--size` CSS variable on the `<td>` element is either missing, malformed, or has an incorrect `calc()` value.","error":"Chart bars/columns are flat or incorrectly sized despite data values being correct."},{"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.","cause":"The necessary axis-display classes (e.g., `show-primary-axis`, `show-4-secondary-axes`) are missing from the main `<table>` element.","error":"Axes, grid lines, or labels are not visible on the chart."}],"ecosystem":"npm"}