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