HOWTO: Add images to your charts

There are a few methods of adding images to your charts, and they are:

1. Tooltips

Tooltips are regular HTML DIV tags and so can contain a wide variety of HTML - links, movies, pictures etc They can be formatted with CSS (and there's also a specific CSS class that you can use to make them all appear the same - OfficeExcel_tooltip). For example:

[No canvas support]

2. Background images

If what you want to achieve is to add a "tag" to your charts (eg in a corner of the chart), or you simply want a background image then the Bar, Line and Scatter charts all support background images. The chart below shows an example of these. You don't have to use a large image - by using the background image properties you can specify whether the image is stretched across the whole canvas, the X/Y coordinates of the image and the alignment.

[No canvas support]

Note: Being a background image, be aware that the image is the first thing that's drawn on the canvas. As such, any grid that you have will be drawn over the top of the image. You can of course turn the grid off if you don't want this.

3. CSS Positioning

By using CSS prelative/absolute positioning you can place a regular image over the top of the canvas. As with background images, the image will not be affected by the canvas redrawing. If you want to link the image or add event listeners to it, you can do so as you would normally.

[No canvas support]

The HTML markup needed to achieve this is:

<div style="position: relative">
    <canvas id="cvs_css" width="600" height="250">[No canvas support]</canvas>
    <img src="../images/logo.png" style="position: absolute; top: 35px; left: 30px; border: 1px dashed gray; padding: 3px" />
</div>
' ' ' '

4. Using the ModalDialog

You can make use of the ModalDialog to show images, changing the image in the ModalDialog DIV each time it is shown. You can use the new events to make it easier to do.

[No canvas support]