Using DOM text instead of canvas text for your charts

Written by Richard Heyes, on 13th March 2016

By using DOM text (normal browser text) the quality of the text shown on your charts can be improved and it's accessible too.


Are you disappointed by the poor quality of the text on a canvas tag? I am. It keeps me awake at night and ruins my sleepy time. It might even be responsible for an embarrassing rash that I won't say any more about. Maybe I just don't understand the inner workings of drawing on canvas, but I just don't understand why it's so hard to get nice looking text at normal zoom.

I'm usually going back and forth on this issue but at the moment, I'm on a 'forth' and have created this example of using relative/absolute positioning and DOM nodes for text - so the text isn't added by using the canvas API but rather, positioning span elements over the canvas. It has an example of canvas API text as well so that you can easily see the difference.

There are lots of caveats involved so it's not suited to lots of situations.

One example that you may or may not find useful is that the text is selectable (for cut/copy/paste). So it's more accessible if that's required for your chart(s).

An example of the new text

I haven't made the change to the RGraph text function (yet) so this example is restricted to this page.

Note that there's some "spill over" from the media queries CSS that are used on this site (ie the media queries aren't specific enough), but other than that this is a functioning demo. So feel free to zoom but not enough to trigger the media queries (the left navigation bar disappears when they are).

[No canvas support]