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 »

A basic Bar chart

[No canvas support]

An example of a straightforward Bar chart. It has the axes turned off, the default margin sizes have been altered and it uses units on the y-axis labels. Otherwise, it's pretty unremarkable except for the fact that two of the labels are multi-line. This is accomplished by using carriage returns in the text like this: Monday\n(yuck!)

When the screen is smaller the size of the canvas is reduced, the size of the text is reduced and the labels are changed so that the weekday names are the three-letter versions.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<div>
    <canvas id="cvs" width="750" height="250">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<script>
    // Create the new Bar chart. Nothing special is being done here - note
    // though that when you create a new RGraph object you don't necessarily
    // need to assign the chart object to a variable - like it isn't here.
    new RGraph.Bar({
        id: 'cvs',
        data: '12,18,10,9,6,20,18',
        options: {
            
            // Add some X-axis labels - you can use a newline character (\n) to make
            // the label span multiple lines
            yaxisScaleUnitsPost: 'k',
            colors: ['red'],
            title: 'A basic Bar chart',
            titleBold: true,
            xaxis: false,
            yaxis: false,
            marginLeft: 50,
            marginBottom: 50,
            tooltips: '%{key}',
            tooltipsFormattedUnitsPost: '%',
            tooltipsCss: {
                fontSize: '26pt'
            },
            tooltipsFormattedKeyLabels: ['Dave','John'],
            //tooltipsEvent: 'mousemove'
        }
    }).wave().responsive([
        {maxWidth:null,width:750,height:250,options: {textSize:14,xaxisLabels: ['Monday\n(yuck!)','Tuesday','Wednesday','Thursday','Friday\n(woo!)','Saturday','Sunday'],marginInner: 20}, parentCss: {textAlign: 'center'}},
        {maxWidth:900,width:400,height:150,options: {textSize:10,xaxisLabels:['Mon\n(yuck!)','Tue','Wed','Thu','Fri\n(woo!)','Sat','Sun'],marginInner: 10}, parentCss: {textAlign: 'center'}}
    ]);
</script>