Chartjs-Chart.js different doughnut thickness in a mixed chart

by

1👍

✅

You can define the weight option on individual datasets to obtain the desired result.

weight: The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.

Please take a look at below runnable code snippet and see how it works.

var pieChart = new Chart("myChart", {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      weight: 0.2
    }, {
      data: [200, 100, 25],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment