[Chartjs]-Chartjs Nested Doughnut Layers With Different Thickness

by

3👍

✅

I have found the solution by putting two doughnut charts on top of each other. In this way, I was able to set different cutoutPercentage values. In this example, red and blue layers have different thickness.

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 20
  },
  data: {
    datasets: [{
      backgroundColor: [
        "red"
      ],
      data: [1]
    }]
  }
});
var ctx2 = document.getElementById("chart2");
var chart2 = new Chart(ctx2, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 90
  },
  data: {
    datasets: [{
      backgroundColor: [
        "blue"
      ],
      data: [1]
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<div class="container" style="position:relative;  ">
  <canvas id="chart" style="position:absolute;"></canvas>
  <canvas id="chart2" style="position:absolute;"></canvas>
</div>

Leave a comment