[Chartjs]-Chart.js – Toggle visibility of charts

by

2👍

✅

In my view a better solution is to modify the DOM to replace the canvas element, so you can redraw it with your new data :

var canvas_html = '<canvas id="canvas" height="100px;"></canvas>';
var drawChart = function(data) {
    // reinit canvas
    $('#canvas_container').html(canvas_html);

    // redraw chart
    var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(data, {
            responsive : true
    }); 
};

I have made an update of your fiddle so you can see the result.

1👍

This is fiddly, think it’s because your using Chart.js which creates the charts using iframes which are never fun to work with. Without forcing a page reload I dont think you’re going to be able to do it. The canvas is being drawn at 0px height and width on the hidden charts so just changing their parents divs display using jQuery to block isn’t going to cut the mustard.

I’ve updated your fiddle so that clicking on each button shows each chart separately but the only thing I couldnt fix was hiding the last three charts on page load. Hopefully this is something that you can work with.

I’ve removed display: none from the charts

0👍

I had same issue and solved it by looking at visibility of container div, if div is visible render chart otherwise do nothing. so on switch tab call function to render chart, by that time div should be visible. here is sample code,

if ($(".canvas-holder2").is(":visible")) {

    window['myDoughnut'] = new Chart($("#chart-area")[0]
            .getContext("2d"))
            .Doughnut(data, {

                responsive: true,
                animateScale: true
            });

                window['myDoughnut'].update();
}

Leave a comment