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 use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. 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 (£129) commercial license available.

More »

A Line chart showing employee sales

[No canvas support]

A Line chart showing the employee sales by department. Since this chart is a copy of a chart found on the Internet it uses the Line chart - though a stacked or grouped Bar chart may represent the data better because the types of furniture aren't related to each other.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<div style="text-align: center">
    <canvas id="cvs" width="575" height="450">[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 Line chart
    new RGraph.Line({
        id: 'cvs',
        
        // The four datasets that are shown on the chart - a multi-dimensional
        // array.
        data: [
            [190,165,47,121,30,72],
            [12,180,10,80,25,75],
            [42,80,93,25,21,120],
            [2,42,27,47,43,50]
        ],

        options: {
            shadow: false,
            tickmarksStyle: null,
            backgroundGridVlines: false,
            backgroundGridColor: 'gray',
            colorsBackground: '#222',
            xaxis: false,
            yaxis: false,
            textColor: '#A7A5A6',
            textSize: 14,
            title: '2009 employee sales by department',
            titleColor: 'white',
            xaxisLabels: ['Food','Auto','Misc','Furniture','Bath','Kitchen'],
            marginLeft: 50,
            marginRight: 50,
            marginBottom: 60,
            colors: ['#B8202C','#96D1E3','#FA8710','#62648D'],
            
            // The key for this chart is positioned in the bottom margin
            // instead of the top
            key: ['Mary','Tom','Brad','Kate'],
            keyPosition: 'margin',
            keyLabelsSize: 14,
            keyLabelsColor: 'rgb(248,248,248)',
            keyPositionY: 425,
            responsive: [
                {maxWidth:null,width:575,height:450,options:{linewidth: 7,marginTop: 75,titleSize: 17,keyPositionY: 425},css:{'float':'none'}},
                {maxWidth:900,width:400,height:300,options:{linewidth: 4,marginTop: 55,titleSize: 17,keyPositionY: 275},css:{'float':'none'}}
            ]
        }
    
    // Here we use the beforedraw event to clear the canvas to a dark
    // color before the drawing is performed. Since it's the beforedraw
    // event the call to the draw() function has to be after the on()
    // function (otherwise the beforedraw event would have already run
    // by the time that the event is added.
    }).on('beforedraw', function (obj)
    {
        // Clear the canvas to a specific color
        RGraph.clear(obj.canvas, '#555557');

    // Use the trace effect to show the chart and add some responsive capability to accommodate
    // smaller screens.
    }).trace();
</script>