MENU
.net Powerful JavaScript charts

Adding images to your charts

The drawImage function for SVG charts can be used to easily add images to your chart.

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.

Name: object
Description: 
Your chart object. This should be a chart that's drawn an the same SVG tag that you want to see the image on.
Default: [required - must be given]
Name: src
Description: 
The url to the image. This can be both an absolute URL (eg https:/​/www.example.com/images/xxx.png or a relative url (eg ../images/xxx.png)
Default: [required - must be given]
Name: x
Description: 
The X coordinate for the images top left corner.
Default: [required - must be given]
Name: y
Description: 
The Y coordinate for the images top left corner.
Default: [required - must be given]
Name: width
Description: 
The width of the image. The image will be shrunk if the width and height ratio given does not match that of the image.
Default: none
Name: height
Description: 
The height of the image. The image will be shrunk if the width and height ratio given does not match that of the image.
Default: none
Name: backgroundColor
Description: 
The background color of the image. This is evident if you have transparency in your image or if you apply padding.
Default: none
Name: border
Description: 
Whether you want a border displayed around your image.
Default: false
Name: borderRadius
Description: 
How much the border corners are rounded. By setting this high you could make a circular image. You may also want to apply some padding if you do this.
Default:  0
Name: borderWidth
Description: 
The width of the border.
Default: 1
Name: borderColor
Description: 
The colour of the border.
Default: black
Name: opacity
Description: 
The opacity (ie the tansparency) of the image. This should be a number between 0 and 1. 1 indicates that the image will be fully opaque (ie not transparent at all).
Default: 1
Name: padding
Description: 
The padding that goes around the image and inside the border.
Default:  0