HOWTO: Use repeating fill patterns as colors

• A Line chart example of patterns
• A Bar chart example of patterns

canvas can use repeating patterns as colors. These images are typically quite small and repeat to fill whatever space is required to be filled. A common use is as backgrounds - for example, desktop wallpaper. You can use patterns as you would normal colors although you should be aware that some of the charts have quirks in the color handling when the colors are objects and not strings or text. As such you may need to give an array of colors instead of just the pattern - even if there is only one pattern to be used (the Line chart is an example of this):

line.set({
    // Use an array of colors
    colorsFill: [myPattern]
    
    // Instead of this
    // colorsFill: myPattern
})

A Line chart example of patterns

As mentioned above with the Line chart, because of its internal handling of colors, the pattern, when given as the fill, should be an array.

<script>
    // Start by creating the chart but not creating or assigning the pattern yet
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,5,1],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            filled: true,
            colors: ['black'],
            linewidth: 5,
            tickmarksStyle: null,
            spline: true,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            marginInner: 5,
            textSize: 14
        }
    });

    // Now create a pattern using an image object and the standard canvas API.
    // This pattern is then set as the fill in the Line chart
    img = new Image();
    img.src = '/images/pattern.png';

    // When the pattern image that we're using has loaded - create the pattern
    // and set it on the Line chart object. Note that the draw() function is now
    // called (not above)
    img.onload = function ()
    {
        var pattern = line.context.createPattern(this, 'repeat');
    
        // Set the pattern on the Line chart that was created above. Note
        // the square braces around the pattern variable. This is necessary with
        // the Line chart - but not all chart types
        line.set({
            filledColors: [pattern]
        }).draw();
    }
</script>

A Bar chart example of patterns

Here's a Bar chart example of patterns. Remember that patterns can be used with most (if not all) of the chart types that RGraph has.

<script>
    // Create the bar chart but don't draw it yet
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,3,5,3,1],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            shadowOffsetx: 2,
            shadowOffsety: 2,
            shadowBlur: 2,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 12,
            colors:['gray'],
            responsive: [
                {maxWidth: null, width: 700, height: 300, callback: setImage}, // Use a callback: function to set the fill image
                {maxWidth: 900, width: 400, height: 200, callback: setImage}   // Use a callback: function to set the fill image
            ]
        }
    }).draw();

    
    //
    // Use a callback function that loads the image and then sets it
    // on the chart. The chart is then redrawn.
    //
    function setImage ()
    {
        // Create a pattern using an image.
        var img2 = new Image();
        img2.src = '/images/pattern2.jpg';

        // When the pattern image that we're using has loaded - do this
        img2.onload = function ()
        {
            var pattern2 = line.context.createPattern(this, 'repeat');

            // Set the pattern on the Bar chart
            bar.set({
                colors: [pattern2]
            }).draw();
        }
    }
</script>

Note

• You don't have to use an image that repeats - any image can be used.