Charts.css: Construindo Gráficos com CSS Puro

A maioria dos desenvolvedores frontend instintivamente recorre ao Chart.js ou D3.js quando um design exige visualização de dados. Essa é uma escolha razoável — até você precisar carregar centenas de kilobytes de JavaScript apenas para renderizar um gráfico de barras em uma página de documentação ou um dashboard simples. Charts.css oferece uma abordagem diferente: visualização de dados em CSS puro construída sobre tabelas HTML semânticas, sem necessidade de um motor de renderização JavaScript.

Veja como funciona, no que é bom e onde deixa de fazer sentido.

Como Funciona o Charts.css: Gráficos em Tabelas HTML Estilizados com CSS

Charts.css é um framework CSS que transforma elementos <table> padrão em gráficos visuais usando classes utilitárias e propriedades customizadas CSS. Não há JavaScript envolvido na renderização. O motor de layout do navegador faz todo o trabalho visual.

A ideia central é direta: seus dados ficam em uma tabela HTML real. Charts.css estiliza essa tabela para parecer um gráfico. Isso significa que os dados subjacentes permanecem acessíveis a leitores de tela e mecanismos de busca sem nenhum esforço extra — embora você ainda precise de marcação adequada para obter o benefício completo.

Instalação

Via CDN:

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

Via npm:

npm install charts.css

Representando Dados com Propriedades Customizadas CSS

Cada célula de dados em sua tabela usa a propriedade customizada --size para representar seu valor como um número entre 0 e 1. Este valor normalizado é o que Charts.css usa para dimensionar o elemento visual — uma barra, um segmento, um ponto.

Aqui está um exemplo mínimo de gráfico de barras:

<table class="charts-css bar" style="height: 200px;">
  <caption>Monthly Signups</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Signups</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td style="--size: 0.4;">400</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td style="--size: 0.7;">700</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td style="--size: 1.0;">1000</td>
    </tr>
  </tbody>
</table>

A classe charts-css ativa o framework. A classe bar define o tipo de gráfico. O valor --size em cada <td> controla o comprimento da barra proporcionalmente.

Aplicando Diferentes Tipos de Gráficos

Trocar tipos de gráfico é uma questão de trocar a classe. Charts.css suporta bar (barras horizontais), column (colunas), line (linha), area (área), pie (pizza) e alguns outros. O suporte a recursos varia — bar e column são os mais refinados, enquanto alguns tipos têm opções de customização mais limitadas.

<!-- Gráfico de colunas -->
<table class="charts-css column">

<!-- Gráfico de linha -->
<table class="charts-css line">

<!-- Gráfico de pizza -->
<table class="charts-css pie">

Classes utilitárias adicionais lidam com rótulos, eixos, espaçamento e exibição de dados:

<table class="charts-css bar show-labels show-primary-axis data-spacing-10">

Acessibilidade: Real mas Não Automática

Como Charts.css usa marcação <table> real, leitores de tela podem acessar os dados brutos diretamente — uma vantagem genuína sobre bibliotecas baseadas em canvas ou SVG. Mas isso só funciona se você escrever a tabela corretamente: inclua um <caption>, use <th> com atributos scope adequados e certifique-se de que o conteúdo das células seja significativo. O framework fornece a estrutura, mas a acessibilidade ainda depende da sua marcação.

Quando Gráficos CSS Fazem Sentido — e Quando Não Fazem

Charts.css é adequado para:

• Sites de documentação e páginas estáticas
• Dashboards simples com dados atualizados com pouca frequência
• Relatórios leves onde o tamanho do bundle importa

Não é a ferramenta certa para:

• Gráficos interativos com tooltips, zoom ou eventos de clique
• Dados em tempo real ou atualizados frequentemente
• Visualizações complexas como grafos de força ou escalas customizadas
• Grandes conjuntos de dados onde o controle refinado de renderização importa

Para esses casos, bibliotecas JavaScript existem por boas razões.

Conclusão

Charts.css é uma ferramenta focada. Ela faz uma coisa bem: transformar dados de tabelas HTML semânticas em gráficos CSS legíveis sem enviar uma única linha de lógica de renderização JavaScript. Seu pequeno tamanho é difícil de contestar para contextos estáticos ou de baixa interatividade. Apenas entre com expectativas claras — é um complemento às bibliotecas de gráficos JavaScript, não uma substituição.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.