teratail

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<div class="chart_price">
   <canvas id="chartPrice" width="300" height="300"></canvas>
   <p>制作実績<br>円グラフ</p>
</div>

CSS

.chart_price {
  position: relative;
}

p {
   position: absolute;
   top: 0;
   left: 0;
   margin: auto;
   right: 0;
   margin: auto;
   text-align: center;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%); 
}

JavaScript

//ドーナツグラフ
          var ctx = document.getElementById("chartPrice");
          var myPieChart = new Chart(ctx, {
            //グラフの種類
            type: 'doughnut',
            //データの設定
            options: {
               legend: {
             	    display: false,
               },
            },
            data: {
                //データ項目のラベル
                labels: ["30万円以下", "30万～50万", "60万～90万", "100万～200万", "200万円以上"],
                //データセット
                datasets: [{
                    //背景色
                    backgroundColor: [
                        "#DA372B",
                        "#EAAF00",
                        "#3A9A4B",
                        "#3A7CEC",
                        "#8042FF"
                    ],
                    //背景色(ホバーしたとき)
                    hoverBackgroundColor: [
                        "#DA372B",
                        "#EAAF00",
                        "#3A9A4B",
                        "#3A7CEC",
                        "#8042FF"
                    ],
                    //グラフのデータ
                    data: [314, 80, 108, 79, 10]
                }]
            }
          });