Plugin to draw legend on canvas instead of HTML #42

wants to merge 5 commits into

9 participants


This is based on rokstrnisa's pull request, with some improvements to address some concerns from OleLaursen.

  1. Fonts are no longer hard-coded, but use the built-in canvas routines and try to use the placeholder's font style.
  2. Implemented as a plugin, which leaves the main library untouched (no 'html'/'canvas' switch). So you just need to add:

    <script type="text/javascript" src="jquery.flot.legendoncanvas.js"></script>
  3. I've hand-tested in Chrome (18), Firefox (5, 11, 12) and Internet Explorer (8, 9). The font size is slightly smaller than expected in Firefox, but ok.

I'm hoping that since this doesn't touch the main code, it'd be ok to add this plugin to the trunk.

@dnschnur dnschnur was assigned Oct 19, 2012

thanks a lot, saved my day


This addition works great for me. But since the legend text is now drawn via Canvas, you can't change its color with CSS rules. This commit permits users to choose a text color using { legend: { color: '#aabbcc' } } in the flot options:



This does not currently work on 0.8.2, does it?

Flot member

Probably not. This is on the 0.9 milestone more for the benefit of anyone watching this PR; the actual code will be completely different; this won't get merged.


I can confirm, this does in fact work with 0.8.2, and it's been my saving grace while I'm waiting in anticipation for 0.9 to be released (with supposedly full canvas legend support).

@roydondsouza roydondsouza referenced this pull request in pa7/heatmap.js Apr 24, 2014

How to draw legend on canvas instead of HTML #102


Hi! You may be interested in this custom canvas legend plugin I created:

There is an extensive docblock in this file instructing how to use it.

An example of drawing triangle symbols in the legend

An example of drawing dashed lines in the legend

What do you think? Is this ready to be put in the official plugin registry? Issues and pull requests are welcome.


Hi, thanks for your scritp, works fine. The only thing is that there's no way to show the $reg; symbol superscript, none works ok:
$reg; or

always show the tags, any idea?

EDIT: we do it updating each ctx.fillText(label, posx, posy)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment