chartist.js: taille du graphique dans le premier onglet trop petit

Question

J'ai une page où il y a deux différents onglets avec des graphiques chart.js à l'intérieur. L'exemple de travail peut être trouvé à cette Codepen Le problème auquel je suis confronté (comme vous pouvez le constater dans le stylo mentionné ci-dessus) est que le graphique sur le premier onglet est extrêmement petit par rapport aux autres malgré les mêmes valeurs d'options graphiques . J'avais essayé la solution mentionnée à chart.js github issue qui nous demande de mettre à jour les cartes sur click des onglets comme ceci:

$(".tab").find(".ct-chart").each(function(i, e) { 
    e.__chartist__.update(); 
}); 

mais qui ne fixe une question générale des cartes dans tous les onglets ne montrant pas/taille être trop petit. J'ai essayé de mettre à jour les graphiques sur la charge de document aussi, mais cela n'a servi à rien.

FYI: J'ai plus de graphiques (graphiques linéaires) dans la même page dans une structure de tabulation qui affiche bien.

Answer 1

Le display:flex était à l'origine du problème avec le graphique, seul le premier onglet de graphique contenait la classe active, qui avait cette propriété à l'origine de ce problème. Est-ce vraiment nécessaire, nous pouvons simplement commenter cette propriété CSS et le problème est résolu. Faites-moi savoir si cette propriété est nécessaire, alors nous devons travailler sur l'ajustement de la flexbox pour être pleine largeur!

.tab.active { 
    display:block; 
    //display: flex; 
    //flex-wrap: wrap; 
} 

Codepen Demo