Terence Eden. He has a beard and is smiling.
Theme Switcher:

Quick and dirty bar-charts using HTML's meter element

· 5 comments · 300 words · Viewed ~669 times

"If it's stupid but it works, it's not stupid."

I want to draw some vertical bar charts. I don't want to use a 3rd party library, or bundle someone else's CSS, or learn how to build SVGs.

HTML contains a <meter> element. It is used like this:

 HTML<meter min="0" max="4000" value="1234">1234</meter>

Which looks like this: 1234

There isn't much you can do to style it. Browser manufacturers seem to have forgotten it exists and the CSS standard kind of ignores it.

It is possible to use CSS to rotate it using:

 CSSmeter {
   transform: rotate(-90deg);
}

But then you have to mess about with origins and the box model gets a bit confused.

See what 1234 I mean?

You can hack your way around that with <div>s and bludgeoning your layout into submission.

But that is a bit tedious.

Luckily, there's another way. As suggested by Marius Gundersen, it's possible to set the writing direction of the element to be vertical.

That means you can have them "written" vertically, while having them laid out horizontally. Giving a nice(ish) bar-chart effect.

1000200030004000

As well as the normal sort of CSS spacing, there is basic colour support for values which are inside a specific range:

1000 2000 3000 4000

The background colour can also be set.

1000

I dare say they're slightly more accessible than a raster image - even with good alt text. They can be targetted with JS, if you want to do fancy things with them.

Or, if you just want a quick and dirty bar-chart, they're basically fine.

Share this post on…

5 thoughts on “Quick and dirty bar-charts using HTML's meter element”

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<br>
<cite>
<code>
<del datetime="">
<em>
<i>
<img src="" alt="" title="" srcset="">
<p>
<pre>
<q cite="">
<s>
<strike>
<strong>

To respond on your own website, write a post which contains a link to this post - then enter the URl of your page here. Learn more about WebMentions.