Morris.js chart not working inside bootstrap tab

Question

I have a situation where I try to use MorrisJS charts inside two different boot tabs . The chart loads fine on the first tab (by default), but when I click on the second tab, the chart does not load properly. This is very strange since I copy and paste the same as on the first and second tabs, but the second one does not load for me.

Here is a link to configure jsfiddle I. https://jsfiddle.net/phz0e68d/5/

Here is the code:

HTML:

<div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="row"> <div class="col-md-12"> <div id="chart1" style="height: 200px;"></div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile"> <div class="row"> <div class="col-md-12"> <div id="chart2" style="height: 200px;"></div> </div> </div> </div> </div> </div> 

JavaScript:

 Morris.Bar({ element: 'chart1', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], hideHover: 'always' }); Morris.Bar({ element: 'chart2', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], hideHover: 'always' }); 

The first graph is as follows:

The second graph is as follows:

As you can see, the second chart is not loading properly. There is an error in the console regarding negative width, but I'm not sure how this is possible.

Answer 1

Set the Morris.Bar resize property to true:

 resize: true 

Assign your Morris.Bar to a variable:

 var homeBar = Morris.Bar({...}); var profileBar = Morris.Bar({...}); 

Add an event triggered when the tabs change, which redraws the histogram and causes a resize:

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { var target = $(e.target).attr("href") // activated tab switch (target) { case "#home": homeBar.redraw(); $(window).trigger('resize'); break; case "#profile": profileBar.redraw(); $(window).trigger('resize'); break; } }); 

See the full working snippet below:

 var homeBar = Morris.Bar({ element: 'chart1', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], hideHover: 'always', resize: true }); var profileBar = Morris.Bar({ element: 'chart2', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], hideHover: 'always', resize: true }); $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { var target = $(e.target).attr("href") // activated tab switch (target) { case "#home": homeBar.redraw(); $(window).trigger('resize'); break; case "#profile": profileBar.redraw(); $(window).trigger('resize'); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="row"> <div class="col-md-12"> <div id="chart1" style="height: 200px;"></div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile"> <div class="row"> <div class="col-md-12"> <div id="chart2" style="height: 200px;"></div> </div> </div> </div> </div>