chartist.js: size of graph in first tab too small

Question

I have a page where there are two different tab layouts which have chart.js graphs inside them. The working example can be found at this Codepen The issue i am facing (as you can notice in the pen mentioned above) is that the graph on the first tab is extremely small compared to the others in spite of having the same graph options values. I had tried the solution mentioned at chart.js github issue which asks us to update the charts on click of tabs like this:

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

but that only fixed an overall issue of charts in all of the tabs not showing/ size being too small. I tried to update charts on document load too but that has been to no avail.

FYI: i have more graphs (line graphs) in the same page in a tab structure which is displaying fine.

Answer 1

The display:flex was causing the issue with the chart, only the first chart tab contained the active class, which was having this property which caused this issue. Is this really necessary, we can just comment out this CSS property and the problem gets solved. Let me know if this property is needed, then we need to work on adjusting the flexbox to be full width!

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

Codepen Demo