Beautiful and free JavaScript charts for your website

Share RGraph:

Free and Open Source SVG and canvas charts

RGraph is an Open Source 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 docs: SVG Canvas

RGraph is Free and Open Source software using the MIT license

RGraph is licensed using the MIT license for complete freedom.

60+ chart types using both SVG and canvas to draw them.

RGraph is built using HTML5 technologies - SVG and canvas.

Great support is available (and that's not just me bragging!).

Open Source and Free to use

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...

Combine different types of charts

Many types of charts can be combined on a single SVG or canvas tag. This means you can combine types to create rich charts and dashboards. Here are some examples of combined charts:

A combined SVG Line and Bar chart

A combined SVG filled line and Bar chart

A wider than usual combined canvas Line and Bar chart

A canvas grouped Bar chart combined with VProgress bars

A canvas Bar chart combined with a Pie chart

A canvas Line chart that uses color transparency

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:

<script>
    RGraph.SVG.AJAX.getJSON('/getdata.html?json', function (json)
    {
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: json.data,
            options: {
                xaxisLabels: json.labels
            }
        }).draw();
    });
</script>

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.