<div class="chart-wrapper">
  <canvas id="myChart"></canvas>
</div>
.chart-wrapper {
 width: 95vh;
 margin: auto;
} 
const ctx = document.getElementById('myChart') as HTMLCanvasElement

//この2つの値を設定するだけ!!
const percentage = 76 //グラフのパーセンテージ(76%)
const backgroundColor = 'rgba(255, 0, 0, 1)' //グラフの色(赤)

new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [percentage, 100 - percentage],
      backgroundColor: [
        backgroundColor, //赤色
        'rgba(0, 0, 0, 0)',
      ],
      borderWidth: 0
    }]
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js