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 »

My chart is only visible if I click on the page first

Posted by Alberto Giribal at 14:34 on Friday 2nd July 2021 [link]
I Have 3 graphs in 3 different canvas in the same page. The last one only turns to visible if I click over it, otherwise it remains hidden.
I didn't use any kind of hidden and show events, and I don't understand why this behavior. I tried to disable the others 2 graphs (commenting the draw line), and it's the same result.
Thank you all

Posted by Richard at 17:43 on Friday 2nd July 2021 [link]
It sounds like you have the <canvas> tag positioned below the code that creates the chart - is this the case?

If you're not using the window.onload or DOMContentLoaded events then the positioning of the <canvas> tags and the code that creates the charts matters - the tags should be above the code.

Like this:

<!-- The canvas tag is first -->
<canvas id="cvs"></canvas>

<!-- Then the code to create the chart -->
    new RGraph.Bar({
        id: 'cvs',
        data: [4,3,8,4,2,5,6],
        options: {

If you don't want to change things around then try using the window.onload or DOMContentLoaded events:

window.onload = function ()
    // Create the chart here


document.addEventListener('DOMContentLoaded', function (e)
    // Create the chart here
}, false);

Optionally, you can add a redraw after a small timeout (feel free to adjust the duration):

setTimeout(function ()
}, 250); // 250 = Quarter of a second

[Replies are now closed]