Beautiful and free JavaScript charts for your website

Free and Open Source SVG and canvas charts

RGraph is an Open Source (using the MIT license) charts library that creates charts using JavaScript and either SVG or canvas. The charts are fast and attractive to look at (as evidenced by the Bar chart shown here). Read about JavaScript charts

Many chart types

60+ chart types using both SVG and canvas for drawing. From Bar and Line charts to a variety of Gauges - all of your needs are catered for.

Read the documention for: SVG Canvas

There are lots (oodles!) of demos in the demo section as well as more examples in the documentation and all over the website.

As well as the regular chart types other types of chart can be created by using the predefined types. For example the Pie chart can be configured to look like this type of chart.

RGraph is Free and Open Source software using the MIT license
RGraph is licensed using the MIT license for complete freedom.
RGraph supports many different chart types using both SVG and canvas
60+ chart types using both SVG and canvas to draw them.
RGraph is built using HTML5 technologies
RGraph is built using HTML5 technologies - SVG and canvas.
Great support for issues with RGraph
Great support is available (and that's not just me bragging!).

What's new with RGraph?

Using the SVG key in your charts
8th October 2017
A page illustrating the SVG key option was added. The SVG is supported in gutter mode only (the canvas key supports gutter and graph mode).

How to lazy load images to make pages faster
3rd October 2017
A new HTML5 Effects blog post has been added that illustrates how you can utilise lazy loading of images to increase the load time of your webpage. Increasing the speed of your web pages has multiple benefits including better SEO, less user drop-off and less bandwidth usage (which if you pay for your bandwidth can be a god-send!

How to use AJAX to update forms without pressing a submit button
12th September 2017
This is a blog post that demonstrates how you can use AJAX to auto-save the contents of forms instead of relying on the user pressing a submit button. If nothing else it could be used to autosave the contents of a form so that if the page is inadvertently refreshed then no data is lost.

Open Source and Free to use

RGraph will not cause your piggy bank to feel any lighter - because it's free!

Fed up with the high cost of JavaScript charting libraries? RGraph isn't like that - it's Open Source and Free to use! And none of that faux Open Source Creative Commons licensing either. It's good old fashioned MIT licensed for maximum freedoms. No up-front payment, no recurring fees and no usage caps. You can use it as much or as little as you wish without paying anything. Just think of all the money you'll save! Maybe you'll have a pile of cash like the one pictured here...

Data import utilities

If your data is stored in Google Sheets, a CSV file or via AJAX then RGraph has utilities for you! They allow you to fetch data directly without storing it as a file on your web-server first.

The Google Sheets importer talks directly to the Sheets app without having to download anything first so you can show real time representations of the data in your spreadsheets.

Similarly the CSV reader reads from your CSV file directly so you can again update the CSV and it is immediately reflected on your chart. If your CSV file is actually a script that outputs the results of database queries this can be a good way of handling database integration.

The CSV reader can also read the contents of tags in the page - so you could embed the CSV data in a tag and read that information with the CSV reader.

And finally both the canvas and SVG code bases have a set of AJAX functions that make it easy to perform AJAX queris and handle the resulting information. Such as:

    RGraph.SVG.AJAX.getJSON('/getdata.html?json', function (json)
        new RGraph.SVG.Bar({
            id: 'chart-container',
            options: {
                xaxisLabels: json.labels

Animations and effects

Animations and effects are available for each chart type and there's a number of CSS3 effects available that can be used with any chart. The chart specific effects are kept in the chart library files whilst the generic CSS effects are in their own library file. This allows the page-weight to be kept to a minimum.

(Sorry - there aren't any Mickey Mouse animations!)

Fully documented

From the canvas HOWTO documents to the SVG docs pages the RGraph library is fully documented. There's a large section dedicated to installation and setup to help you get up and running. Failing that you can ask support question in the support forum.