Chartjs-Angularjs lazy load chartjs when in another tab

by

1👍

You need to create the chart when you OPEN the tab (you can get the data required, just don’t use it to create the chart before your tab is open) and not before – so basically, lazy render your chart 🙂

fiddle – http://jsfiddle.net/3x7uu5eh/

This is the section that shows our tab content AND draws the chart

// this is our show tab
$("#tabButton").bind("click", function () {
    $("#tabPane").show();

    // move this section out of this function to see the issue
    var ctx = $("#myChart").get(0).getContext("2d");
    var myLineChart = new Chart(ctx).Line(data);
})

If you move the marked section out of the show tab, the chart won’t render – illustrating the problem.

Leave a comment