Estoy tratando de usar ChartsJS dentro de un sistema de tabulación. Se representa el primer gráfico en la primera pestaña, pero no los gráficos posteriores.

Creo que esto se debe a que las pestañas tienendisplay:none, por lo tanto, cuando los gráficos se generan por primera vez, se crean en un div con cero dimensiones.

Esto soluciona el problema, pero rompe las pestañas:

.vertical-nav>div.tab-content {
    display: block !important;
}

Con eso en mente, he intentado todo tipo de formas de regenerar los gráficos después de abrir la pestaña, o forzardisplay:block justo antes de generar el gráfico. Nada funciona.

Aquí está mi intento de regenerar los gráficos:

jQuery(document).ready(function() {

    jQuery('.vertical-nav ul li span').click(function(){

        // Target the canvas within the correct tab
        var tabIndex = jQuery(this).parent().index();
        var canvasID = jQuery('.vertical-nav .tab-content:eq( ' + tabIndex + ' ) canvas').attr('id');

        theChart = charts[canvasID].chart;
        builtChart = charts[canvasID].builtChart;

        // Destroy all of the charts so that we can rebuild them
        for (var key in charts) {
            if (charts.hasOwnProperty(key)) {
                charts[key].builtChart.destroy();
            }
        }

        // get the chart data and options from the charts object
        newData = charts[canvasID].data;
        newOptions = charts[canvasID].options;

        // create the new chart
        newChart = document.getElementById(canvasID).getContext("2d");
        new Chart(newChart).Line(newData, newOptions);

    });
})

El sitio de preparación es:http://telcomplusplc.uberleaf.com/company/?tab=our-growth

Incluso he intentado establecer un tiempo de espera para retrasar la generación del gráfico hasta que se muestre la pestaña, pero no tuve suerte.

Puede ver en la URL anterior que el primer gráfico genera y se regenera como debería. Es solo el resto de ellos que no lo hacen (presumiblemente porque están con undisplay:none div en primera generación).

Cualquier ayuda es muy apreciada. Feliz de dar más información si es necesario.

Actualizar

Cuando se cambia el tamaño de la ventana, el gráfico se vuelve a dibujar. Aquí está el código para eso (en chart.js):

// Attach global event to resize each chart instance when the browser resizes
helpers.addEvent(window, "resize", (function(){
    // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
    var timeout;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            each(Chart.instances,function(instance){
                // If the responsive flag is set in the chart instance config
                // Cascade the resize event down to the chart.
                if (instance.options.responsive){
                    instance.resize(instance.render, true);
                }
            });
        }, 50);
    };
})());

Creo que lo que necesito es poder disparar eso desde una función de clic. He intentado un fracaso, mis habilidades de JS no son tan buenas.