Chartjs-Chart.js : how I can adjust Pie chart radius?

by

3👍

✅

From the styling section of the pie chart documentation of the chart.js library available here, you will see that there is a weight property. This property is used exactly for making the circles bigger/smaller.

Basically, by playing with the weight of the two data sets you can adjust the sizes of the circles. In the code below, I set the weight of the first dataset to 1 and for the second dataset to 4.

By running the snippet you will see the desired output.

Full code sample

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
      weight: 1
    }],
    labels: ['Minor', 'Other']
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Title',
      position: 'bottom',
      fontSize: 15,
      fontColor: '#000000'
    },
    events: ['mousemove'], // cursor: pointer on hover
    onHover: function (event, chartElement) {
      event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
    },
    legend: {
      display: false
    },
  },
});



var newDataset = {
  data: [1, 3],
  backgroundColor: ['red', 'blue'],
  weight: 4
};

var config = {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 3],
      backgroundColor: ['red', 'blue'],
    }],
    labels: ['Red', 'Blue']
  },
  options: {
    responsive: true
  }
};

chart.data.datasets.push(newDataset);
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style="position: relative; height:500px; width:300px">
						<canvas id="open_chart" style="position:absolute;top:150px;" width="200" height="200"></canvas>
</div>

1👍

Have you tried experimenting with the cutoutPercentage in options { }?

Leave a comment