[Chartjs]-How can I increase the size of the pie (Chart.JS)?

by

25👍

✅

You just need to change the canvas size.

When you are creating the chart you can specify it right in the element:

<canvas id="top10ItemsChart" width="1000" height="1000"></canvas>

Or if you prefer to do it in javascript

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
ctx.width = 1000;
ctx.height = 1000;

If the resizing doesn’t work as you wish, you can also try setting the maintainAspectRatio option to false:

var optionsPie = {
    /** ... */
    responsive: true,
    maintainAspectRatio: false,
    /** ... */
};

Hope it helps.

0👍

In my case, rather different but for associated querents, I wanted my pie chart to not be as large but still allow the legend to be long across the top.

myChart = new Chart("myChart", {
  type: 'doughnut',
  data: {
  labels: [],
  datasets: [{
    data: [],
    backgroundColor: []
  }]
},
options: {
  title: {
    display: true,
    text: "Expense Categories"
  },
  aspectRatio:2.5
}
});

Setting the canvas aspect ratio to 2.5 to allow it to be wide but not tall did the trick for me!

Leave a comment