title: Multiple charts in one page with chart.js
body: <p>I use chart.js and its dependency, jQuery to draw chart. In my case, I need 2 doughnut charts in one of my page, here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script&gt;
          $(function () {
              var ctx = document.getElementById("layanan").getContext('2d');
              var data = {
                  datasets: [{
                      data: [10, 20, 30],
                      backgroundColor: [
                          '#3c8dbc',
                          '#f56954',
                          '#f39c12',
                      ],
                  }],
                  labels: [
                      'Request',
                      'Layanan',
                      'Problem'
                  ]
              };
              var myDoughnutChart = new Chart(ctx, {
                  type: 'doughnut',
                  data: data,
                  options: {
                      maintainAspectRatio: false,
                      legend: {
                          position: 'bottom',
                          labels: {
                              boxWidth: 12
                          }
                      }
                  }
              });
  
              var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
              var data_2 = {
                  datasets: [{
                      data: [10, 20, 30],
                      backgroundColor: [
                          '#3c8dbc',
                          '#f56954',
                          '#f39c12',
                      ],
                  }],
                  labels: [
                      'Request',
                      'Layanan',
                      'Problem'
                  ]
              };
              var myDoughnutChart_2 = new Chart(ctx_2, {
                  type: 'doughnut',
                  data: data_2,
                  options: {
                      maintainAspectRatio: false,
                      legend: {
                          position: 'bottom',
                          labels: {
                              boxWidth: 12
                          }
                      }
                  }
              });
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="layanan" width="240" height="240"&gt;&lt;/canvas&gt;
      &lt;canvas id="layanan_subbagian" width="240" height="240"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I only have one chart, nothing's gone wrong, but when I try to add one more chart, my charts become so large and my page layout becomes so messy. Can you guys figure out what's wrong with my code? Thanks.</p>