An example showing you how to use images as the labels

View the bare-bones version of this demo with any interactive features or animations enabled

Since the advent of the RGraph.text function, which saves the coordinates of the text that is added to the canvas, you have been able to use those coordinates to draw an image onto the canvas. You could even use the coordinates of the bar itself if you wished (if you wanted to add an image above the bar for example)

You might find that using images (eg faces) may make your charts more instantly recognisable.

The code below first creates an array of the image URLs, then creates the chart and then adds the images. The configuration is quite straightforward.

The next bit of code is where the coordinates of the text are looped through and the images are added in place of the text. With canvas charts, the coordinates of the text that's added to the canvas are saved in the obj.coordsText variable so you can use them to add the images in place of the text. Remember that the text labels are actually just empty strings - this is so that the coordinates of where the text should be are stored in the obj.coordsText variable.

Instead of just using the canvas API function drawImage - drawing API Image objects are used to place the images. This means that if you need to you can add tooltips to the images or add event listeners (eg click, mousemove, mouseover and mouseout.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.drawing.image.js"></script>
<script src=""></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="400" height="250" style="float: right">[No canvas support]</canvas>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):