Charts.css is an MIT-licensed open source CSS framework that turns semantic HTML data tables into charts and graphs using nothing but CSS classes, aimed at frontend developers who want visualization without a JavaScript charting dependency.

What it is

Charts.css lives in the frontend/CSS ecosystem and is distributed as a plain stylesheet. Data stays in semantic HTML markup, typically a <table> with a header and body rows, and the framework's CSS classes change how that markup is rendered visually. There are no dependencies and no JavaScript runtime: once the stylesheet is loaded, the same HTML that a screen reader or a crawler can read is the same HTML that draws the chart. The project is written around HTML and SCSS, ships on npm as charts.css, and is documented on the project site at ChartsCSS.org across sections for Get Started, Components, Charts, Customization, Development, and Examples.

The concrete problem it solves is the markup-versus-library split common in dashboard and reporting work. A JavaScript charting library invents its own rendering surface, its own data format, and its own configuration object, so the table or list a developer already has must be converted into something the library understands. Charts.css replaces that conversion step by styling the existing semantic markup directly. It replaces the JavaScript charting library layer for teams whose charts need to be readable, styleable, and themeable through ordinary CSS rather than through a chart configuration API.

Key capabilities

• Data visualization driven entirely by CSS classes applied to semantic HTML, with no JavaScript required at runtime.
• No dependencies, at 58.4 kb minified and 5.9 kb gzipped.
• Installation through npm (npm install charts.css), yarn (yarn add charts.css), or CDN via jsdelivr or unpkg.
• A documented component and chart catalogue on ChartsCSS.org covering Components, Charts, and Customization.
• Styling through CSS classes and CSS variables, so any HTML element can be targeted and restyled.
• Flexibility over composition: the developer chooses which components to display and how to style them, rather than accepting a fixed chart template.

Who uses it and how

• Frontend developers who need charts inside an existing HTML and CSS codebase and want to avoid adding and maintaining a charting library.
• Teams building dashboards and reports where the underlying data already exists as an HTML table and only the presentation needs to change.
• Projects that treat styling as CSS work, using the framework's CSS variables and classes to match an existing design system.
• Documentation and marketing sites that need lightweight graphs where a full JavaScript charting bundle would be disproportionate.
• Static and server-rendered pages, since the chart is produced from markup rather than from client-side script execution.

Getting started

Install with npm install charts.css or yarn add charts.css, or include the stylesheet from the jsdelivr or unpkg CDN. Full setup and usage documentation lives at ChartsCSS.org, starting with the Get Started page.

How it compares

No comparable or alternative product is named in the facts provided for this entry, and no list of paid products it displaces is supplied. It therefore stands alone in this registry on the evidence available.

When to use it — and when not to

Pick Charts.css when the chart belongs in the markup layer and CSS is the right place to style it; note that because the framework ships no JavaScript, anything interactive beyond what CSS can express must be supplied by the surrounding application. It is a poor fit for visualizations that require canvas or SVG rendering, live streaming updates, or chart types that cannot be expressed as styled HTML elements. The project is healthy on activity, with a recent push and an MIT licence, but it carries 36 open issues, so prospective users should check the issue tracker against their specific chart needs before committing.

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

<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

npm install charts.css

yarn add charts.css

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