HTML/CSS

Charts.css: a CSS data visualization framework

Charts.css is a new open source framework for data visualization. It replaces traditional JS charting libraries with a CSS framework. Data visualization can improve user experience as graphical representation of data is usually easier to understand.

If visualization helps end-users to understand data, Charts.css helps frontend developers turn their data into beautiful graphs using simple CSS classes. Modern CSS frameworks (like bootstrap) style HTML elements using predefined CSS utility classes. While those CSS frameworks focus on layouts, Charts.css focuses only on data visualization.

With a few simple CSS classes applied on the container element you can turn your entire table of data into a visually appealing chart. The framework is developer-friendly making it easy to customize every element with simple CSS selectors.

The web offers many charting libraries. They all use JS to render the data. Each implements a different strategy like VML, SVG, HTML canvas, image generators and others methods. Traditional chart libraries are heavily dependent on JS. They unnecessarily complicate the visualization process with endless lists of properties and methods.

With CSS frameworks, none of this is required. The raw data is part of the HTML making it visible to search engines and screen readers. With CSS, rendering is not required, resulting in a performance boost compared to JS solutions.

Charts.css

Share/Like

Article Navigation

Wait .. there's more!

Online CV Jan Rajtoral