<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
This Pen doesn't use any external CSS resources.