HOWTO: Use the RGraph gradient syntax

• Basic gradients
• Extra control over the gradient
• Native canvas gradients
• The JSON alternative syntax for gradients

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.