MorrisJS Chart not being drawn on Bootstrap Tab

There is one common problem when using MorrisJS chart on Bootstrap Tab is that the charts are not drawn on the view.

When first loading the UI, only the charts on active tabs are drawn while charts on other tabs won’t show up on tab click due to UI invalidation since there is no action trigger to draw the charts via tab activation.

Understanding this problem, we can fix it by triggering the chart drawing by calling method redraw() support by Morris.

Also, because the charts are drawn into SVG format, so we need to config its CSS to occupy full width of container, otherwise, charts will be cut off partially.

By listening to the tab activation, we call the methods in order:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = $(e.target).attr("href");
    switch (target) {
        case "#tab-1":
            chart_GoldFlow.redraw();
            $('svg').css({ width: '100%' });
            break;
        case "#tab-2":
            chart_DealerFee.redraw();
            $('svg').css({ width: '100%' });
            break;
    }
});