Charts.CSS, a Pure CSS Charting Library

Write for InfoQ

Charts.css is a new data visualization library that relies solely on CSS and HTML. Avoiding the use of JavaScript/Canvas avoids many of the accessibility challenges in existing solutions while keeping the bundle size under 10 KB when minified and gzipped.

While there is no lack of JavaScript data visualization libraries that offer an impressive set of features, they are often quite bulky, offer partial accessibility support, and of course, rely on JavaScript.

The alternative of drawing graphs using only CSS and HTML has been in discussion for a number of years, with several interesting examples going back all the way to 2015. While impressive, these examples didn't address many of the real-life requirements of a charting library, offering an inferior developer and user experience to those provided by the JavaScript libraries.

Charts.css attempts to address these problems while also providing a coherent and easy-to-use structure that enables developers to integrate it into their website easily.

A basic Charts.css graph contains three HTML elements: a wrapper, a list containing the legend, and a table that contains the data. The table class includes the <chart-type> that defines which chart will be drawn. At the moment, Charts.css supports four main types: bar, column, area, and line. Additional types such as pie, donut, and others are being developed.

<div class="wrapper">
 <ul class="charts-css legend">
 </ul>
 <table class="charts-css <chart-type>">
 </table>
</div>

Adding data is a little tricky as the data visualization is not tied to the table's values. For example, the following table columns display at the same height despite the different values.

<table id="data-example-1" class="charts-css column">
 <tbody>
 <tr>
 <td>40ドルK</td>
 </tr>
 <tr>
 <td>60ドルK</td>
 </tr>
 </tbody>
</table>

To fix that, we need to define the relative value in each column by modifying the CSS variable --size. For example, if we use 0K-100K as our range, then the 40ドルK cell can be defined like this:

<td style="--size: 0.4">40ドルK</td>

Notice that the 40ドルK is not required to draw the chart and can be hidden by wrapping it with a span that includes a .data class like this:

<td style="--size: 0.4"><span class="data"> 40ドルK </span></td>

To control the visualization of the charts, Charts.css provides a set of CSS classes that controls different aspects of the chart such as spacing (.data-spacing-), orientation (.reverse), axes (.show-primary-axis, .show--secondary-axes), etc. In addition, direct access to many CSS properties is possible, enabling the developers to add a range of additional capabilities such as animations.

Charts.css is open source software available under the MIT license.

Related Topics:

• Development
• CSS
• Web Development
• CSS3
• HTML
• CSS4
• Accessibility
• Data Visualization

We protect your privacy.