I've got a Piechart with two different Datasets:

How I can make internal pie chart bigger (or external thinner)? Is there any option how I can adjust it?

Here is my code:

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
    }],
    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'],
};

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=".3.1/jquery.min.js"></script>
<script src=".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>

I've got a Piechart with two different Datasets:

How I can make internal pie chart bigger (or external thinner)? Is there any option how I can adjust it?

Here is my code:

var ctx = $('#open_chart');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [1, 5],
      backgroundColor: ['red', 'blue'],
    }],
    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'],
};

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/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>

I've tried to bine different pie charts: link, but it doesn't work.

• javascript
• charts
• chart.js
• pie-chart

2 Answers 2

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/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>

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