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>
</div>

JavaScript

//ドーナツグラフ
          var ctx = document.getElementById("chartPrice");
          var myPieChart = new Chart(ctx, {
            //グラフの種類
            type: 'doughnut',
            //データの設定
            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]
                }]
            }
          });