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.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

HOWTO: Use the RGraph gradient syntax

Basic gradients

The new gradient syntax that RGraph has makes using gradients in your charts a breeze. The syntax is purposefully very simple: Gradient(white:red) And that's all you have to specify instead of a color. The colors are parsed once, when the draw method is first called and converted to real canvas gradients.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [5,5,8,6,3,5,4],
        options: {
            colors: [
                'Gradient(white:red)',
                'Gradient(rgb(255,255,255):green:green:green)'
            ],
            xaxisLabels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
            textSize: 14
        }
    }).draw();
</script>

Extra control over the gradient

If you want extra control over your gradient that the simple syntax doesn't provide then you can instead use the intermediate level control that the api functions give you. There are functions available for both linear and radial gradients.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [[5,8],[6,8],[7,4],[5,5],[8,5],[7,4],[5,2]],
        options: {
            colors: [RGraph.linearGradient({
                object: bar,
                x1: 0,
                y1: 25,
                x2: 0,
                y2: 225,
                colors: ['red', 'red', 'white']
            })],
            xaxisLabels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
            textSize: 14
        }
    }).draw();
</script>

Native canvas gradients

If you want complete control over the gradient you can use the native canvas functionality by accessing the context object - with obj.context Once you have that you can use the standard canvas 2D api functions to create and control the gradient. Once created you can use it as a normal color specification.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [[5,8],[6,8],[7,4],[5,5],[8,5],[7,4],[5,2]],
        options: {
            textSize: 14
        }
    });

    gradient = bar.context.createLinearGradient(0,25,0,225);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.75, 'red');
    gradient.addColorStop(1, '#fcc');

    gradient2 = bar.context.createLinearGradient(0,25,0,225);
    gradient2.addColorStop(0, 'green');
    gradient2.addColorStop(0.75, 'green');
    gradient2.addColorStop(1, '#cfc');

    bar.set({
        colors: [gradient,gradient2],
        xaxis: false,
        yaxis: false,
        xaxisLabels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        textSize: 14,
        shadow: false,
        grouping: 'grouped'
    }).draw();

    pie = new RGraph.Pie({
        id:'cvs4',
        data: [4,8,6,3,5],
        options: {
        }
    })

    colors = ['red','green','blue','orange','pink','gray']
    for (var i=0; i<colors.length; ++i) {
        var grad = pie.context.createRadialGradient(125,125,0,125,125,125);
        grad.addColorStop(0, 'white');
        grad.addColorStop(1, colors[i]);
        
        colors[i] = grad;
    }
    
    pie.set({
        colors: colors,
        colorsStroke: 'white'
    }).draw();
</script>

The JSON alternative syntax for gradients

There's also an alternative json notation for gradient specification which affords you extra control over the gradient. You can specify start and end coordinates as well as the color stops. The notation is mentioned in the documentation here.