Chartjs-Multiple canvas, reusable gradients

by

1👍

✅

Last time I used chart.js, I had 17 different charts to create.

As long as you can easily grab all of your canvas tags, you can add them all to a object array like this:

//Get array of all canvases on the DOM
var chartCount = $('canvas').length;

for (var i = 1; i < chartCount; i++) {
    //Get DOM element of canvas
    var el = $('chart').get(i);

    //Add new entry to canvas array with DOM element and canvas context
    canvas[i] = {
        'DOM_Element': el,
        'context': el.getContext('2d')
    };
}

Then each canvas context can be referenced with something like canvas[x]['context'].

You could then write a function to loop through all entires in the canvas array adding gradients as desired.

Leave a comment