javascript - Chart.js render in hidden Bootsrap tab -


this driving me mad, using chart.js in bootstrap tabs not render because width set 0 when dom loaded. found out after trying , figuring out why graph not there!

i've searched online , nothing seemed fix issue, can please me this, think need script renders graph when tab selected , succesfully loaded im using 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 html piece in tab:

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

thanks guys!

you need call chart after tab shown. bootstrap provides events on javascript plugins can watch jquery on 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


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -