Charts.css: Diagramme mit reinem CSS erstellen

Apr 27, 2026 · 4 min read

Charts.css: Diagramme mit reinem CSS erstellen

Die meisten Frontend-Entwickler greifen instinktiv zu Chart.js oder D3.js, wenn ein Design Datenvisualisierung erfordert. Das ist eine vernünftige Standardwahl — bis man Hunderte von Kilobytes JavaScript lädt, nur um ein Balkendiagramm auf einer Dokumentationsseite oder einem einfachen Dashboard darzustellen. Charts.css bietet einen anderen Kompromiss: reine CSS-Datenvisualisierung basierend auf semantischen HTML-Tabellen, ohne dass eine JavaScript-Rendering-Engine erforderlich ist.

Hier erfahren Sie, wie es funktioniert, wofür es sich eignet und wo es keinen Sinn mehr macht.

Wichtigste Erkenntnisse

Charts.css transformiert Standard-HTML-<table>-Elemente in visuelle Diagramme, indem es ausschließlich CSS-Utility-Klassen und Custom Properties verwendet — JavaScript-Rendering ist nicht erforderlich.
Daten werden durch die Custom Property --size (ein normalisierter Wert zwischen 0 und 1) in jeder Tabellenzelle dargestellt, die die Layout-Engine des Browsers verwendet, um Balken, Segmente und Punkte zu dimensionieren.
Da das zugrunde liegende Markup eine echte HTML-Tabelle ist, können Screenreader und Suchmaschinen direkt auf die Rohdaten zugreifen — allerdings liegt die korrekte Verwendung von <caption>, <th> und scope-Attributen weiterhin in Ihrer Verantwortung.
Charts.css eignet sich am besten für statische Seiten, Dokumentations-Websites und leichtgewichtige Dashboards, bei denen die Bundle-Größe wichtig ist. Für interaktive, Echtzeit- oder komplexe Visualisierungen bleiben JavaScript-Bibliotheken die bessere Wahl.

Wie Charts.css funktioniert: HTML-Tabellendiagramme mit CSS gestylt

Charts.css ist ein CSS-Framework, das Standard-<table>-Elemente mithilfe von Utility-Klassen und CSS Custom Properties in visuelle Diagramme transformiert. Beim Rendering ist kein JavaScript beteiligt. Die Layout-Engine des Browsers erledigt die gesamte visuelle Arbeit.

Die Grundidee ist einfach: Ihre Daten befinden sich in einer echten HTML-Tabelle. Charts.css gestaltet diese Tabelle so, dass sie wie ein Diagramm aussieht. Das bedeutet, dass die zugrunde liegenden Daten für Screenreader und Suchmaschinen ohne zusätzlichen Aufwand zugänglich bleiben — allerdings benötigen Sie trotzdem korrektes Markup, um den vollen Nutzen zu erzielen.

Installation

Über CDN:

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

Über npm:

npm install charts.css

Daten mit CSS Custom Properties darstellen

Jede Datenzelle in Ihrer Tabelle verwendet die Custom Property --size, um ihren Wert als Zahl zwischen 0 und 1 darzustellen. Dieser normalisierte Wert wird von Charts.css verwendet, um das visuelle Element zu dimensionieren — einen Balken, ein Segment, einen Punkt.

Hier ist ein minimales Balkendiagramm-Beispiel:

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

Die Klasse charts-css aktiviert das Framework. Die Klasse bar legt den Diagrammtyp fest. Der --size-Wert auf jedem <td> steuert die Balkenlänge proportional.

Verschiedene Diagrammtypen anwenden

Der Wechsel des Diagrammtyps erfolgt durch Austausch der Klasse. Charts.css unterstützt Balken-, Säulen-, Linien-, Flächen-, Kreis- und einige weitere Diagramme. Die Feature-Unterstützung variiert — Balken- und Säulendiagramme sind am ausgereiftesten, während einige Typen eingeschränktere Anpassungsoptionen haben.

<!-- Säulendiagramm -->
<table class="charts-css column">

<!-- Liniendiagramm -->
<table class="charts-css line">

<!-- Kreisdiagramm -->
<table class="charts-css pie">

Zusätzliche Utility-Klassen steuern Beschriftungen, Achsen, Abstände und Datenanzeige:

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

Barrierefreiheit: Vorhanden, aber nicht automatisch

Da Charts.css tatsächliches <table>-Markup verwendet, können Screenreader direkt auf die Rohdaten zugreifen — ein echter Vorteil gegenüber canvas- oder SVG-basierten Bibliotheken. Dies funktioniert jedoch nur, wenn Sie die Tabelle korrekt schreiben: Fügen Sie ein <caption> hinzu, verwenden Sie <th> mit korrekten scope-Attributen und stellen Sie sicher, dass der Zelleninhalt aussagekräftig ist. Das Framework gibt Ihnen die Struktur, aber die Barrierefreiheit hängt weiterhin von Ihrem Markup ab.

Wann CSS-Diagramme Sinn machen — und wann nicht

Charts.css eignet sich gut für:

Dokumentations-Websites und statische Seiten
Einfache Dashboards mit selten aktualisierten Daten
Leichtgewichtige Reports, bei denen die Bundle-Größe wichtig ist

Es ist nicht das richtige Werkzeug für:

Interaktive Diagramme mit Tooltips, Zoom oder Klick-Events
Echtzeit- oder häufig aktualisierte Daten
Komplexe Visualisierungen wie Force-Graphen oder benutzerdefinierte Skalen
Große Datensätze, bei denen eine feinkörnige Rendering-Kontrolle wichtig ist

Für diese Fälle existieren JavaScript-Bibliotheken aus gutem Grund.

Fazit

Charts.css ist ein fokussiertes Werkzeug. Es macht eine Sache gut: semantische HTML-Tabellendaten in lesbare CSS-Diagramme umwandeln, ohne eine einzige Zeile JavaScript-Rendering-Logik auszuliefern. Sein geringer Footprint ist für statische oder wenig interaktive Kontexte schwer zu widerlegen. Gehen Sie einfach mit klaren Erwartungen heran — es ist eine Ergänzung zu JavaScript-Charting-Bibliotheken, kein Ersatz.

Häufig gestellte Fragen (FAQs)

Ja. Da Charts.css nur eine CSS-Datei ist, die auf Standard-HTML-Tabellenelemente angewendet wird, funktioniert es in jedem Framework, das HTML rendert. Sie generieren das Tabellen-Markup in Ihrer Komponente wie gewohnt, wenden die charts-css-Klassen an und setzen die Custom Property --size auf jede Zelle. Es sind keine speziellen Bindings oder Wrapper-Bibliotheken erforderlich.

Die --size-Property erwartet eine normalisierte Zahl zwischen 0 und 1. Teilen Sie jeden Datenpunkt durch den Maximalwert in Ihrem Datensatz. Wenn beispielsweise Ihr höchster Wert 1000 ist und eine Zelle 400 darstellt, setzen Sie --size auf 0.4. Sie übernehmen diese Normalisierung selbst, da Charts.css keine eingebaute Datenverarbeitung hat.

Charts.css kann mit Standard-CSS-Transitions und Keyframes animiert werden, und die Dokumentation enthält Beispiele für Bewegungseffekte. Es bietet jedoch nicht die umfangreichen, eingebauten Animationsfunktionen von JavaScript-Bibliotheken wie Chart.js oder D3.js.

Charts.css-Diagramme sind standardmäßig responsiv, da sie mit Standard-CSS-Layout-Techniken erstellt werden. Die Diagramme passen sich der Größe ihres Containers an. Sie können Dimensionen über prozentuale Breiten steuern oder explizite Höhen über Inline-Styles festlegen. Für komplexeres responsives Verhalten verwenden Sie Media Queries, um die Diagrammgröße anzupassen oder zwischen Diagrammtypen bei verschiedenen Breakpoints zu wechseln.

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.