Charts.css: Construyendo Gráficos con CSS Puro

Apr 27, 2026 · 4 min read

Charts.css: Construyendo Gráficos con CSS Puro

La mayoría de desarrolladores frontend recurren instintivamente a Chart.js o D3.js cuando un diseño requiere visualización de datos. Es una opción razonable por defecto — hasta que terminas cargando cientos de kilobytes de JavaScript solo para renderizar un gráfico de barras en una página de documentación o un dashboard simple. Charts.css ofrece una alternativa diferente: visualización de datos en CSS puro construida sobre tablas HTML semánticas, sin necesidad de un motor de renderizado JavaScript.

Aquí te explicamos cómo funciona, en qué es bueno, y dónde deja de tener sentido.

Puntos Clave

Charts.css transforma elementos estándar <table> de HTML en gráficos visuales usando únicamente clases de utilidad CSS y propiedades personalizadas — no se requiere renderizado JavaScript.
Los datos se representan mediante la propiedad personalizada --size (un valor normalizado entre 0 y 1) en cada celda de la tabla, que el motor de diseño del navegador utiliza para dimensionar barras, segmentos y puntos.
Dado que el marcado subyacente es una tabla HTML real, los lectores de pantalla y motores de búsqueda pueden acceder a los datos directamente — aunque el uso adecuado de <caption>, <th> y atributos scope sigue siendo tu responsabilidad.
Charts.css es más adecuado para páginas estáticas, sitios de documentación y dashboards ligeros donde el tamaño del bundle importa. Para visualizaciones interactivas, en tiempo real o complejas, las bibliotecas JavaScript siguen siendo la mejor opción.

Cómo Funciona Charts.css: Gráficos de Tablas HTML Estilizados con CSS

Charts.css es un framework CSS que transforma elementos <table> estándar en gráficos visuales usando clases de utilidad y propiedades personalizadas CSS. No hay JavaScript involucrado en el renderizado. El motor de diseño del navegador hace todo el trabajo visual.

La idea central es directa: tus datos viven en una tabla HTML real. Charts.css estiliza esa tabla para que parezca un gráfico. Esto significa que los datos subyacentes permanecen accesibles para lectores de pantalla y motores de búsqueda sin ningún esfuerzo adicional — aunque aún necesitas un marcado adecuado para obtener el beneficio completo.

Instalación

Vía CDN:

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

Vía npm:

npm install charts.css

Representando Datos con Propiedades Personalizadas CSS

Cada celda de datos en tu tabla usa la propiedad personalizada --size para representar su valor como un número entre 0 y 1. Este valor normalizado es lo que Charts.css utiliza para dimensionar el elemento visual — una barra, un segmento, un punto.

Aquí hay un ejemplo 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>

La clase charts-css activa el framework. La clase bar establece el tipo de gráfico. El valor --size en cada <td> controla la longitud de la barra proporcionalmente.

Aplicando Diferentes Tipos de Gráficos

Cambiar tipos de gráfico es cuestión de intercambiar clases. Charts.css soporta barras, columnas, líneas, áreas, circulares (pie), y algunos otros. El soporte de características varía — bar y column son los más pulidos, mientras que algunos tipos tienen opciones de personalización más limitadas.

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

<!-- Gráfico de líneas -->
<table class="charts-css line">

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

Las clases de utilidad adicionales manejan etiquetas, ejes, espaciado y visualización de datos:

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

Accesibilidad: Real pero No Automática

Dado que Charts.css usa marcado <table> real, los lectores de pantalla pueden acceder a los datos directamente — una ventaja genuina sobre bibliotecas basadas en canvas o SVG. Pero esto solo funciona si escribes la tabla correctamente: incluye un <caption>, usa <th> con atributos scope apropiados, y asegúrate de que el contenido de las celdas sea significativo. El framework te proporciona la estructura, pero la accesibilidad aún depende de tu marcado.

Cuándo los Gráficos CSS Tienen Sentido — y Cuándo No

Charts.css es adecuado para:

Sitios de documentación y páginas estáticas
Dashboards simples con datos actualizados con poca frecuencia
Reportes ligeros donde el tamaño del bundle importa

No es la herramienta correcta para:

Gráficos interactivos con tooltips, zoom o eventos de clic
Datos en tiempo real o actualizados frecuentemente
Visualizaciones complejas como grafos de fuerza o escalas personalizadas
Conjuntos de datos grandes donde el control granular del renderizado importa

Para esos casos, las bibliotecas JavaScript existen por buenas razones.

Conclusión

Charts.css es una herramienta enfocada. Hace una cosa bien: convertir datos de tablas HTML semánticas en gráficos CSS legibles sin cargar una sola línea de lógica de renderizado JavaScript. Su pequeña huella es difícil de discutir para contextos estáticos o de baja interactividad. Solo entra con expectativas claras — es un complemento a las bibliotecas de gráficos JavaScript, no un reemplazo.

Preguntas Frecuentes

Sí. Dado que Charts.css es simplemente un archivo CSS aplicado a elementos de tabla HTML estándar, funciona en cualquier framework que renderice HTML. Generas el marcado de la tabla en tu componente como lo harías normalmente, aplicas las clases charts-css, y estableces la propiedad personalizada --size en cada celda. No se necesitan bindings especiales ni bibliotecas wrapper.

La propiedad --size espera un número normalizado entre 0 y 1. Divide cada punto de datos por el valor máximo en tu conjunto de datos. Por ejemplo, si tu valor más alto es 1000 y una celda representa 400, establece --size en 0.4. Manejas esta normalización tú mismo ya que Charts.css no tiene procesamiento de datos integrado.

Charts.css puede ser animado usando transiciones CSS estándar y keyframes, y la documentación incluye ejemplos de efectos de movimiento. Sin embargo, no proporciona las capacidades de animación ricas e integradas de bibliotecas JavaScript como Chart.js o D3.js.

Los gráficos de Charts.css son responsivos por defecto ya que están construidos con técnicas de diseño CSS estándar. Los gráficos se redimensionan con su contenedor. Puedes controlar las dimensiones usando anchos basados en porcentajes o establecer alturas explícitas mediante estilos en línea. Para comportamiento responsivo más complejo, usa media queries para ajustar el tamaño del gráfico o cambiar entre tipos de gráfico en diferentes breakpoints.

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.