title: Using chart js within Bootstrap Carousel
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> //Sampel Line Chart 
   var LineChartSampleData = {
    labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
    datasets: [{
     label: "Sales 1",
     fillColor: "transparent",
     strokeColor: "rgba(220,220,220,1)",
     pointColor: "rgba(220,220,220,1)",
     pointStrokeColor: "#fff",
     pointHighlightFill: "#fff",
     pointHighlightStroke: "rgba(220,220,220,1)",
     data: [11, 12, 13, 14, 15, 16, 17]
    }, {
     label: "Sales 5",
     fillColor: "transparent",
     strokeColor: "rgba(236, 80, 80,1)",
     pointColor: "rgba(236, 80, 80,1)",
     pointStrokeColor: "#fff",
     pointHighlightFill: "#fff",
     pointHighlightStroke: "rgba(236, 80, 80,1)",
     data: [15, 21, 35, 42, 33, 33, 81]
    }]
   };
  
   
   //Sampel Bar Chart
   var BarChartSampleData = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
          }
      ]
  };
  
  
  //Sampel Radar Chart
  var RadarChartSampleData = {
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 90, 81, 56, 55, 40]
          },
          {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 96, 27, 100]
          }
      ]
  };
  
  //Sampel Polor Chart
  var PolarChartSampleData = [
      {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
      },
      {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
      },
      {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
      },
      {
          value: 40,
          color: "#949FB1",
          highlight: "#A8B3C5",
          label: "Grey"
      },
      {
          value: 120,
          color: "#4D5360",
          highlight: "#616774",
          label: "Dark Grey"
      }
  
  ];
  
  //Sampel Pie Doughnut Chart
  var PieDoughnutChartSampleData = [
      {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
      },
      {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
      },
      {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
      }
  ]
  
   window.onload = function() {
  
    window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
     responsive:true
    });
    
    window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
     responsive:true
    });
    
    window.RadarChartSample = new Chart(document.getElementById("radar-chart-sample").getContext("2d")).Radar(RadarChartSampleData,{
     responsive:true
    });
    
    window.PolarChartSample = new Chart(document.getElementById("polar-chart-sample").getContext("2d")).PolarArea(PolarChartSampleData,{
     responsive:true
    });
    
    window.PieChartSample = new Chart(document.getElementById("pie-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
     responsive:true
    });
    window.DoughnutChartSample = new Chart(document.getElementById("doughnut-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
     responsive:true
    });
    
  
   };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt;&lt;/script&gt;
  &lt;div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt; 
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item item1"&gt;
        &lt;canvas id="bar-chart-sample" height="80"&gt;&lt;/canvas&gt;
        &lt;ul class="doughnut-chart-legend"&gt;
           &lt;li class="mobile ultra-small"&gt;&lt;span class="legend-color"&gt;&lt;/span&gt;Mobile&lt;/li&gt;
           &lt;li class="kitchen ultra-small"&gt;&lt;span class="legend-color"&gt;&lt;/span&gt; Kitchen&lt;/li&gt;
           &lt;li class="home ultra-small"&gt;&lt;span class="legend-color"&gt;&lt;/span&gt; Home&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="item item2"&gt;
      &lt;canvas id="line-chart-sample" height="80"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
      &lt;canvas id="line-chart-sample" height="80"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr class="transition-timer-carousel-progress-bar" /&gt;
    &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a problem with Chart Js within Bootstrap Carousel, its not show because chart not load, it show with <code>width:0px and height:0px</code>. Ive been working around this thing in last few hours, hope you guys can help me </p>
  
  <p>This is my Html :</p>
  
  <pre><code> &lt;div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel"&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt; 
        &lt;!-- Carousel items --&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="active item item1"&gt;
            &lt;canvas id="bar-chart-sample" height="80"&gt;&lt;/canvas&gt;
            &lt;ul class="doughnut-chart-legend"&gt;
               &lt;li class="mobile ultra-small"&gt;&lt;span class="legend-color"&gt;&lt;/span&gt;Mobile&lt;/li&gt;
               &lt;li class="kitchen ultra-small"&gt;&lt;span class="legend-color"&gt;&lt;/span&gt; Kitchen&lt;/li&gt;
               &lt;li class="home ultra-small"&gt;&lt;span class="legend-color"&gt;&lt;/span&gt; Home&lt;/li&gt;
           &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="item item2"&gt;
          &lt;canvas id="line-chart-sample" height="80"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;hr class="transition-timer-carousel-progress-bar" /&gt;
        &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Chart JS:</p>
  
  <pre><code>      //Sampel Line Chart 
           var LineChartSampleData = {
            labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
            datasets: [{
             label: "Sales 1",
             fillColor: "transparent",
             strokeColor: "rgba(220,220,220,1)",
             pointColor: "rgba(220,220,220,1)",
             pointStrokeColor: "#fff",
             pointHighlightFill: "#fff",
             pointHighlightStroke: "rgba(220,220,220,1)",
             data: [11, 12, 13, 14, 15, 16, 17]
            }, {
             label: "Sales 5",
             fillColor: "transparent",
             strokeColor: "rgba(236, 80, 80,1)",
             pointColor: "rgba(236, 80, 80,1)",
             pointStrokeColor: "#fff",
             pointHighlightFill: "#fff",
             pointHighlightStroke: "rgba(236, 80, 80,1)",
             data: [15, 21, 35, 42, 33, 33, 81]
            }]
           };
  
  
       var BarChartSampleData = {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
              {
                  label: "My First dataset",
                  fillColor: "rgba(220,220,220,0.5)",
                  strokeColor: "rgba(220,220,220,0.8)",
                  highlightFill: "rgba(220,220,220,0.75)",
                  highlightStroke: "rgba(220,220,220,1)",
                  data: [65, 59, 80, 81, 56, 55, 40]
              },
              {
                  label: "My Second dataset",
                  fillColor: "rgba(151,187,205,0.5)",
                  strokeColor: "rgba(151,187,205,0.8)",
                  highlightFill: "rgba(151,187,205,0.75)",
                  highlightStroke: "rgba(151,187,205,1)",
                  data: [28, 48, 40, 19, 86, 27, 90]
              }
          ]
      };
  
   window.onload = function() {
  
    window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
     responsive:true
    });
  
    window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
     responsive:true
    });
   };
  </code></pre>
  
  <p>Thanks for your help,Cheers!</p>