RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »


Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

Can the SVG Bar chart have a watermark image?

Posted by watermark in bar chart at 09:36 on Friday 19th February 2021 [link]
can we add watermark in SVG Bar chart ? diagonally ?

Posted by Richard at 12:53 on Friday 19th February 2021 [link]
You can add a background image like this:

bar = new RGraph.SVG.Bar({
    id: 'cc',
    data: [5,9,6,3,2,6,7],
    options: {
        marginInner: 20,
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        xaxis: false,
        yaxis: false,
        backgroundImage: '/images/logo.png',
        backgroundImageStretch: false,
        backgroundImageX: 35,
        backgroundImageY: 35,
        backgroundImageW: 64,
        backgroundImageH: 64,

// Rotate the image 45 degrees about the coordinates (67,67)
bar.svg.all.getElementsByTagName('image')[0].setAttribute('transform','rotate(45 67 67)');

Is that the sort of thing you wanted?

[Replies are now closed]