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('', function(){
  var data = [
    value: 300,
    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,


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