chatjs-doughnut-sample

chatjs-doughnut-sample.markdown

chatjs-doughnut-sample

A Pen by MaximizedOwl on CodePen.

License.

index.html

<div class='content'>
  <canvas id="myChart" width="50" height="50"></canvas>
  <h1 class='title'>タイトル</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js" integrity="sha512-VCHVc5miKoln972iJPvkQrUYYq7XpxXzvqNfiul1H4aZDwGBGC0lq373KNleaB2LpnC2a/iNfE5zoRYmB4TRDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>



<script>
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["〜90", "90〜100", "100〜110", "110〜"],
      datasets: [{
          backgroundColor: [
              "pink",
              "orange",
              "yellow",
              "yellowgreen"
          ],
          data: [20, 30, 35, 15]
      }]
    },
  });
</script>  

script.js

document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

style.css

body {
  font-family: system-ui;
  background: #fff;
  color: #0f0f0f;
  text-align: center;
}

.content {
  position: relative;
}

.title {
  position: absolute;
  top: 40%;
  left: 38%;
  z-index: 10;
}