Adding images to your charts

• Introduction
• Example
• Available options

Introduction

The canvas libraries have an easy way to add images to the canvas with the drawing api image object. Meanwhile the SVG libraries don't have a drawing api so adding your own image to a chart wasn't as easy as it could be. This though, has now changed with the addition of the RGraph.SVG.drawImage function. It's very easy to use and because it's SVG you don't need to use the draw event (because SVG automatically redraws the scene for you).

Example

Here's some example code showing you a simple chart with an image placed in the top left corner.

<script>
    bar = new RGraph.SVG.Bar({
        id:  'chart-container',
        data: [8,4,6,3,5,9,7],
        options: {
            title: 'An example SVG Bar chart',
            colors: ['blue']
        }
    }).draw();
    
    RGraph.SVG.drawImage({
        object: bar,
        src:    'images/alex.png',
        x:      35,
        y:      35
    });
</script>

Available options

These options are available to you to customise how the image appears and behaves.