Display a rotating doughnut chart with animated labels and data.

HTML

<script src="https://npmcdn.com/chart.js@4.5.0/dist/chart.umd.js"></script>

<div>
  <canvas id="chartContainer"></canvas>
</div>

JavaScript

const options = {
  animation: {
    animateRotate: true,
    loop: true,
  }
}

const rawdata = [
  { year: 2010, count: 10 },
  { year: 2011, count: 20 },
  { year: 2012, count: 15 },
]

const data = {
  labels: rawdata.map((row) => row.year),
  datasets: [
    {
      label: "Year",
      data: rawdata.map((row) => row.count),
    },
  ],
}

new Chart(document.getElementById("chartContainer"), {
  type: "doughnut",
  data,
  options,
})