Making Charts with CSS

There are many ways to make visual representations of data: bar charts, line graphs, scatter diagrams, sparklines… not to mention the many ways in which you can implement them on the web. In this post I’ll be looking at plain CSS methods for styling data. But before we take a look at some examples, I think it’s worth briefly going over our design goals first.

Guidelines for Chart Making

There are three guidelines to developing a chart on the web:

1. Accessibility: everyone should be able to view some format of the data we present, even if it’s a boring 

   table

     (boring is better than nothing).

2. Ease of development: graph-making shouldn’t be unnecessarily complex, and we’ll certainly want to avoid technical debt for the future.
3. Performance: we need to make sure that users don’t spend a lot of time waiting for assets to download or for elements to be painted to the screen.

These goals are likely to change depending on the type of chart that make, as performance is going to be less of a concern for a static bar chart than a crazy interactive map. With these guidelines in mind, let’s look at a few examples.

CSS Bar Charts

There are a couple of ways to make a simple bar chart in CSS. For starters we’ll use a definition list for our data:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”PqMoax” default_tab=”result” user=”ziauddinsarker”]See the Pen <a href=’http://codepen.io/ziauddinsarker/pen/PqMoax/’>PqMoax</a> by Ziauddin Sarker (<a href=’http://codepen.io/ziauddinsarker’>@ziauddinsarker</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

Sparklines

We don’t always have to use 

tables

  when representing information like this. That’s probably the case when we make a series of sparklines, tiny graphs that sit next to a line of text and help readers get a quick overview of the information. Wilson Miner outlined this method and made sure to focus on the accessibility of the information beforehand:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”KpOKBK” default_tab=”result” user=”ziauddinsarker”]See the Pen <a href=’http://codepen.io/ziauddinsarker/pen/KpOKBK/’>KpOKBK</a> by Ziauddin Sarker (<a href=’http://codepen.io/ziauddinsarker’>@ziauddinsarker</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

Problems with making charts with CSS

• If you’re using 

  background

    to style an element then it (probably) won’t be visible if the web page is printed. The only exception is if you use 

  -webkit-print-color-adjust: exact;

    in a WebKit browser.

• Finicky control over design: absolutely positioning table rows, for instance, is likely to be pain for developers at some point in the future.
• Browser support is a laborious process in some instances, and ensuring that all devices support every CSS property might be difficult to test.
• It’s not possible to use inline styles on pseudo elements, so if you want to style a pseudo element with JavaScript then this makes things a bit more complicated.
• It’s possible to do anything with CSS, but when we’re making pure CSS line graphs we should probably take a little while to reconsider the implications that this might have on the rest of the codebase.

Wrapping up

Plain CSS and markup solutions for charts and graphs work to a certain extent, and in many situations they’re probably the safest bet. But I think it’s worth exploring alternative solutions to representing data.