Charts.css

Was kann Charts.css?

Wie der Name schon vermuten lässt, handelt es sich um ein Framework, welches nur mit CSS – also ohne JavaScript – auskommt. Wer mich kennt weiß, dass ich ein großer Fan von CSS-Only-Lösungen bin. Ganz nach dem Motto: je weniger Code, desto besser. Denn kein JavaScript bedeutet vor allem eines: maximale Performance. Charts.css bietet alle gängigen Charttypen für die Visualisierung von Daten.

Wann sollte ich Charts.css einsetzen?

Charts.css eignet sich vor allem für den Einsatz in Projekten, wenn die dargestellten Charts nicht interaktiv sein müssen. Interaktives „Klicken“ beispielsweise wird nicht unterstützt. Dafür aber schicke Hover-Effekte und Animationen. Wenn diese Randbedingungen auch in Zukunft noch zutreffen, steht dem Einsatz von Charts.css eigentlich nichts im Wege.

Zum Zeitpunkt dieses Blogposts befindet sich das Framework jedoch noch in einer frühen Entwicklungsphase (Version 0.9.0). Für einen produktiven Einsatz ist deshalb genau zu prüfen, ob die benötigten Charttypen bereits verfügbar sind. Das warten auf die Version 1.0.0 ist deshalb empfehlenswert.

Warum sollte ich Charts.css einsetzen?

Aus eigener Erfahrung kann ich berichten, dass mir genau so ein CSS-only Chart-Framework in der Vergangenheit schon öfter gefehlt hatte. Ein gängiger Usecase sind z.B. druckfähige Reports ohne Interaktion auf Basis von HTML/CSS. Meist werden hierzu dann Frameworks wie Chart.js eingesetzt und alle interaktiven Funktionen „abgeklemmt“. Das führt zu unnötigem Mehraufwand und einer kostenintensiveren Wartung der Software. Nicht nur der langsamere Rendering-Prozess, sondern auch die um mehr als 140% größere Bundlesize (Charts.css 70 KB; Chart.js 190 KB) führt vor allem bei mobilen Endgeräten zu einer schlechteren UX.

Wenn ihr also das nächste mal nicht interaktive Charts bauen müsst, gibt Charts.css eine Chance, denn das Projekt bedient mit dem CSS-only-Ansatz eine wichtige „Marktlücke“ und hat deshalb großes Potenzial.