Chartjs Nested Doughnut Layers With Different Thickness

Question

How can I create a nested doughnut that has layers with different thickness? Chartjs only allows cutoutPercentage to be defined in options property and all layers are changed by this value. I want to have a nested doughnut that has layers with different thickness. For example, in this chart, I want to make red and blue layers with different thickness.

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    cutoutPercentage: 75
  },
  data: {
    datasets: [{
        backgroundColor: [
          "red"
        ],
        data: [1]
      },
      {
        backgroundColor: [
          "blue"
        ],
        data: [1]
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<canvas id="chart"></canvas>

Answer 1

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>