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 »

 

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 »

 

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 »

Resurrected news articles

Written by Richard Heyes, RGraph author, on 15th August 2020

Here are some old news articles that I originally wrote some time ago. For whatever reason, they were removed from the site but the information in them is still valid so I've decided to resurrect them.

Read all about dotted and dashed lines here
This is an article that I originally wrote in 2013 and is all about the then-new dotted and dashed lines feature of the canvas tag. It's possible to create dotted and dashed lines even without this setting but it's very clunky and curved lines aren't possible. So native dotted and dashed lines are definitely the way to go if you have the choice.

Read about drag and drop between two canvas tags here
This article is also from 2013 and is an example of creating drag and drop between two canvas tags. Normally you might think that dragging between canvas tags isn't possible but it is if you add a bit of javascript magic!

How to measure the text height with the canvas tag
Also from 2013 is this article about measuring text height when you're working with canvas. When you use the measureText function you aren't given the text height - however, this article details a method that will allow you to get both the width and the height of your text.

The new features of the canvas v5 specification
Back in 2012, this was an article about the then-new features of the canvas v5 specification. Such new features include things like a new Path object, Hit Regions and more. Now, 8 years on, a lot of the features still haven't been implemented (some have though). The Path object, for example, would be very useful but still hasn't been implemented - however, RGraph has an alternative that can be used which is detailed here.

A description of Path2D objects
From early 2014 this article goes into the then-new Path2d object that had been added to the canvas v5 specification. It details the api and gives you examples of its use. RGraph has its own pathing function which turns paths into a single string (like svg paths). So you will see things similar to this in the RGraph codebase:

this.path(
    'lw % b m % % l % % s %',
    linewidth,
    x, y, width, height,
    color
);

Why using semi-colons in JavaScript can lead to better-minified code
You don't always have to use semi-colons at the end of lines in javascript, but doing so can lead to better-minified code. This article explains why.