chart.jsで各項目の太さを変えたグラフを表示する

項目数だけグラフを重ねることで実現できるようです。

HTML

<div class="donutsChartCustom">
      <canvas id="dnChart1" class="circle01" width="300" height="300"></canvas>
      <canvas id="dnChart2" class="circle02" width="300" height="300"></canvas>
      <canvas id="dnChart3" class="circle03" width="300" height="300"></canvas>
      <canvas id="dnChart4" class="circle04" width="300" height="300"></canvas>
</div>

CSS

.donutsChartCustom {
  position: relative;
  height: 400px;
}

.donutsChartCustom .circle01,
.donutsChartCustom .circle02,
.donutsChartCustom .circle03,
.donutsChartCustom .circle03 {
  position: absolute;
}

JS

  //カスタムドーナツグラフ
  var dn1 = document.getElementById("dnChart1");
  var dnChart1 = new Chart(dn1, {
    type: 'doughnut',
    data: {
      labels: ["1", "2"],
      datasets: [{
        label: '# of Votes',
        data: [38, 62],
        backgroundColor: [
          '#C2185B',
          'rgba(0,0,0,0)'
        ],
        borderWidth: 0
      }]
    },
    options: {
      animation:{
        animateScale:true
      },
      legend: {
        display: false
      },
      cutoutPercentage : 70
    }
  });


  var dn2 = document.getElementById("dnChart2");
  var dnChart2 = new Chart(dn2, {
    type: 'doughnut',
    data: {
      labels: ["1", "2", "3"],
      datasets: [{
        label: '# of Votes',
        data: [38, 33, 29],
        backgroundColor: [
          'rgba(0,0,0,0)',
          '#EC407A',
          'rgba(0,0,0,0)'
        ],
        borderWidth: 0
      }]
    },
    options: {
      animation:{
        animateScale:true
      },
      legend: {
        display: false
      },
      cutoutPercentage : 78
    }
  });



  var dn3 = document.getElementById("dnChart3");
  var dnChart3 = new Chart(dn3, {
    type: 'doughnut',
    data: {
      labels: ["1", "2", "3", "4"],
      datasets: [{
        label: '# of Votes',
        data: [38, 33, 17, 12],
        backgroundColor: [
          'rgba(0,0,0,0)',
          'rgba(0,0,0,0)',
          '#F48FB1',
          'rgba(0,0,0,0)'
        ],
        borderWidth: 0
      }]
    },
    options: {
      animation:{
        animateScale:true
      },
      legend: {
        display: false
      },
      cutoutPercentage : 80
    }
  });


  var dn4 = document.getElementById("dnChart4");
  var dnChart4 = new Chart(dn4, {
    type: 'doughnut',
    data: {
      labels: ["1", "2", "3", "4"],
      datasets: [{
        label: '# of Votes',
        data: [38, 33, 17, 12],
        backgroundColor: [
          'rgba(0,0,0,0)',
          'rgba(0,0,0,0)',
          'rgba(0,0,0,0)',
          '#FCE4EC'
        ],
        borderWidth: 0
      }]
    },
    options: {
      animation:{
        animateScale:true
      },
      legend: {
        display: false
      },
      cutoutPercentage : 85
    }
  });

参考：Experiments with chart.js