title: How can I increase the size of the pie (Chart.JS)?
body: <p>I'm generating a pie chart with legend that looks like so:</p>
  
  <p><a href="https://i.stack.imgur.com/vQK5x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vQK5x.png" alt="enter image description here"></a></p>
  
  <p>As you can perceive, the pie is pitifully puny. I prefer it to be twice as tall and twice as wide.</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>    var formatter = new Intl.NumberFormat("en-US");
  
      Chart.pluginService.register({
          afterDatasetsDraw: function (chartInstance) {
              var ctx = chartInstance.chart.ctx;
  
              ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
              ctx.textAlign = 'center';
              ctx.textBaseline = 'bottom';
              ctx.fillStyle = '#666';
  
              chartInstance.config.data.datasets.forEach(function (dataset) {
  
                  for (var i = 0; i &lt; dataset.data.length; i++) {
                      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                          total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                          mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2,
                          start_angle = model.startAngle,
                          end_angle = model.endAngle,
                          mid_angle = start_angle + (end_angle - start_angle) / 2;
  
                      var x = mid_radius * 1.5 * Math.cos(mid_angle);
                      var y = mid_radius * 1.5 * Math.sin(mid_angle);
  
                      ctx.fillStyle = '#fff';
                      if (i === 0 || i === 3 || i === 7) { // Darker text color for lighter background
                          ctx.fillStyle = '#666';
                      }
                      var percent = String(Math.round(dataset.data[i] / total * 100)) + "%";
                      // this prints the data number
                      // this prints the percentage
                      ctx.fillText(percent, model.x + x, model.y + y);
                  }
              });
          }
      });
  
      var data = {
          labels: [
              "Bananas (18%)",
              "Lettuce, Romaine (14%)",
              "Melons, Watermelon (10%)",
              "Pineapple (10%)",
              "Berries (10%)",
              "Lettuce, Spring Mix (9%)",
              "Broccoli (8%)",
              "Melons, Honeydew (7%)",
              "Grapes (7%)",
              "Melons, Cantaloupe (7%)"
          ],
          datasets: [
          {
              data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
              backgroundColor: [
                  "#FFE135",
                  "#3B5323",
                  "#fc6c85",
                  "#ffec89",
                  "#021c3d",
                  "#3B5323",
                  "#046b00",
                  "#cef45a",
                  "#421C52",
                  "#FEA620"
                    ]
          }]
      };
  
      var optionsPie = {
          responsive: true,
          scaleBeginAtZero: true,
          legend: {
              display: false
          },
          tooltips: {
              callbacks: {
                  label: function (tooltipItem, data) {
                      return data.labels[tooltipItem.index] + ": " +
                          formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
                  }
              }
          }
      };
  
      var ctx = $("#top10ItemsChart").get(0).getContext("2d");
      var top10PieChart = new Chart(ctx,
      {
          type: 'pie',
          data: data,
          options: optionsPie,
          animation: {
              duration: 0,
              easing: "easeOutQuart",
              onComplete: function () {
                  var ctx = this.chart.ctx;
                  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'bottom';
  
                  this.data.datasets.forEach(function (dataset) {
  
                      for (var i = 0; i &lt; dataset.data.length; i++) {
                          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                          total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                          mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2,
                          start_angle = model.startAngle,
                          end_angle = model.endAngle,
                          mid_angle = start_angle + (end_angle - start_angle) / 2;
  
                          var x = mid_radius * Math.cos(mid_angle);
                          var y = mid_radius * Math.sin(mid_angle);
  
                          ctx.fillStyle = '#fff';
                          if (i === 3) { // Darker text color for lighter background
                              ctx.fillStyle = '#444';
                      }
                      var percent = String(Math.round(dataset.data[i] / total * 100)) + "%";
                      // this prints the data number
                      ctx.fillText(dataset.data[i], model.x + x, model.y + y);
                      // this prints the percentage
                      ctx.fillText(percent, model.x + x, model.y + y + 15);
                  }
              });
          }
      }
  });
  
      $("#top10Legend").html(top10PieChart.generateLegend());
  </code></pre>
  
  <p>How can I increase the size of the pie?</p>
  
  <h2>UPDATE</h2>
  
  <p>The "View" as requested by Nkosi is:</p>
  
  <pre><code>&lt;div class="row" id="top10Items"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="topleft"&gt;
              &lt;h2 class="sectiontext"&gt;Top 10 Items&lt;/h2&gt;
              &lt;br /&gt;
              &lt;div id="piechartlegendleft"&gt;
                  &lt;div id="container"&gt;
                      &lt;canvas id="top10ItemsChart"&gt;&lt;/canvas&gt;
                  &lt;/div&gt;
                  &lt;div id="top10Legend" class="pieLegend"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      . . .
  </code></pre>
  
  <p>The classes "row" and "col-md-6" are Bootstrap classes.</p>
  
  <p>The custom classes are "topleft":</p>
  
  <pre><code>.topleft {
      margin-top: -4px;
      margin-left: 16px;
      margin-bottom: 16px;
      padding: 16px;
      border: 1px solid black;
  }
  </code></pre>
  
  <p>...sectionText:</p>
  
  <pre><code>.sectiontext {
      font-size: 1.5em;
      font-weight: bold;
      font-family: Candara, Calibri, Cambria, serif;
      color: green;
      margin-top: -4px;
  }
  </code></pre>
  
  <p>...and "pieLegend":</p>
  
  <pre><code>.pieLegend li span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
  }
  </code></pre>