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 »

Two new interesting demos added

Written by Richard Heyes, RGraph author, on 3rd July 2022

Two new demos have been added, which will be available in the next release (6.09). One of the demos is called line-big-data.html and is an example of showing a large amount of data using the Line chart. In this case, there are 100,000 points shown. The rendering takes about half a second. To help improve the rendering time certain bits of the chart are turned off - namely the x-axis, the y-axis and the background grid vertical lines.

The other demo is a Bar chart that uses the responsive callback option to switch to a Horizontal Bar chart when the screen size is smaller. The whole code for this chart is shown below. It uses a very simple Bar chart to set things up and install the responsive configurations. Then each responsive configuration has a callback function that resets the canvas and then draws the appropriate chart.

<script>
    //
    // Some information that's used by both charts
    //
    data          = [4,8,6,4,5,3,1,9,5,8];
    labels        = ['Bob','Jim','Lou','Pob','Kev','Doug','Bono','Vinny','Fee','Yugo'];
    marginInner   =  10;
    tooltipsStyle = {fontSize: '18pt'};
    
    //
    // This is the initial basic Bar chart that sets
    // up the responsive configurations. It's the
    // responsive callback functions that actually
    // draw the charts.
    //
    new RGraph.Bar({
        id: 'cvs',
        data: [],
        options: {
        }
    }).responsive([
        {maxWidth: null, width: 700, height: 350, callback: drawBar},
        {maxWidth: 750,  width: 450, height: 700, callback: drawHbar}
    ]);
    
    //
    // This function resets the canvas and then draws
    // a Horizontal Bar chart.
    //
    function drawHbar ()
    {
        RGraph.reset('cvs');
        
        new RGraph.HBar({
            id: 'cvs',
            data: data,
            options: {
                colors: ['Gradient(#fcc:#f00:#f00)'],
                yaxisLabels: labels,
                marginInner: marginInner,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                xaxis: false,
                textSize: 16,
                labelsAbove: true,
                labelsAboveUnitsPost: '%',
                tooltips: '%{property:yaxisLabels[%{group}]}s results: %{value}%',
                tooltipsCss: tooltipsStyle,
                yaxisLabelsOffsetx: -10,
                marginLeft: 75,
                marginLeftAuto: false
            }
        }).draw();
    }
    
    //
    // This function resets the canvas and then draws
    // a Bar chart.
    //
    function drawBar ()
    {
        RGraph.reset('cvs');
        
        new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                colors: ['Gradient(#fcc:#f00:#f00)'],
                xaxisLabels: labels,
                marginInner: marginInner,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                yaxis: false,
                textSize: 16,
                labelsAbove: true,
                labelsAboveUnitsPost: '%',
                tooltips: '%{property:xaxisLabels[%{group}]}s results: %{value}%',
                tooltipsCss: tooltipsStyle,
                xaxisLabelsOffsety: 5,
                marginBottom: 45
            }
        }).draw();
    }
</script>