About
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 »

 

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

More »

 

Download
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 »

Annotating your charts

The annotations feature brings presentation style functionality to your charts. You can use this feature for highlighting if you need to.

How do annotations work?

Enabling annotations is easy, and consists of doing the following:

obj.set('annotatable', true);

Browser support

Annotations are supported in all browsers that RGraph works with - Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+, Edge and MSIE/Google Chrome Frame. They DO NOT however work with MSIE 7/8+ExCanvas.

What can I use annotations for?

As mentioned you can use it for presentations, highlighting things to yourself or others or just to have fun drawing!

Are annotations persistent?

Depending on which browser you're using - yes. If you're using a modern browser (eg Firefox, Chrome, Edge etc) then you probably won't have any problems. The annotation data is stored in the user's browser (not on the webserver) and the user does not have to confirm anything for storage to be allowed.

How do I show the mini-palette?

You can show the palette by using the RGraph.showPalette function shown below as a context menu item:

obj.set({
    contextmenu: [
        ['Show palette', RGraph.showPalette],
        ['Clear', function () {RGraph.clear(myObj.canvas); myObj.draw();}]
    ]
});

How can I clear the annotations?

You can use the api function, and then clear the canvas and redraw it.
<script>
    RGraph.clearAnnotations((obj.canvas); // Clear the annotation data
    RGraph.clear(obj.canvas);             // Clear the chart
    RGraph.redrawCanvas(obj.canvas);      // Redraw the canvas
</script>

Replaying annotations when they're off

When annotations are not enabled, any prior annotations that may have been made are not displayed. To show them you need to use the api function RGraph.replayAnnotations(obj) after the call to draw.