score:10

Accepted answer

you need to call the chart after the tab is shown. bootstrap provides events on their javascript plugins that you can watch for with a 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

score:1

in my case, i found a class named "fade" with conflict with bootstrap one with same name. my solution was rename my css class to "myfade".


Related Query

More Query from same tag