Showing Chart.js in a hidden Bootsrap tab

Question

it drives me crazy, I use Chart.js on my bootstrap tabs, but they won’t display because the width is set to zero when loading the DOM. I finally found this, trying to understand why my schedule was not there!

I searched on the Internet and nothing seemed to fix my problem, can someone help me with this, I think I need some kind of script that displays a graph when the tab is selected and successfully loaded I use this JS:

var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" } ]; var options = { responsive : true, animation: true, }; var ctx1 = $("#invest-chart").get(0).getContext("2d"); var invest_chart; new Chart(ctx1).Doughnut(data, { responsive : true, animation: true, }); 

Along with this part of html in my tab:

 <canvas id="invest-chart"></canvas> 

Thanks guys!

Answer 1

You need to call up the chart after the tab is displayed. Bootstrap provides events in its javascript plugins that you can observe with jquery on the event.

 $('a[href=#chart]').on('shown.bs.tab', function(){ var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" } ]; var options = { responsive : true, animation: true, }; var ctx1 = $("#invest-chart").get(0).getContext("2d"); var invest_chart; new Chart(ctx1).Doughnut(data, { responsive : true, animation: true, }); }); 

http://codepen.io/anon/pen/bdGrKv