Uncaught (in promise) Error: "undefined" is not a registered controller.

[satyasaadhak]

This is my code

const { Chart, DoughnutController, ArcElement } = require('chart.js');

Chart.register(
  DoughnutController,
  ArcElement
);

fetch("<APIENDPOINT>")
  .then(response => response.json())
  .then(volunteerHours => {
    volunteerHours.items
      .filter(hours => hours.year === new Date().getFullYear())
      .forEach(hours => {
        new Chart(
          document.getElementById(`${hours.month}`),
          {
            data: {
              datasets: [{
                label: hours.month,
                data: [
                  hours.pledgeHours < 100 ? hours.pledgeHours : 100,
                  hours.pledgeHours < 100 ? 100 - hours.pledgeHours : 0
                ],
                backgroundColor: [
                  '#01965e',
                  '#9da4b2'
                ],
                hoverOffset: 4
              }]
            }
          }
        );
      });
  });

I've also tried this

const Chart = require('chart.js/auto');

fetch("<APIENDPOINT>")
  .then(response => response.json())
  .then(volunteerHours => {
    volunteerHours.items
      .filter(hours => hours.year === new Date().getFullYear())
      .forEach(hours => {
        new Chart(
          document.getElementById(`${hours.month}`),
          {
            data: {
              datasets: [{
                label: hours.month,
                data: [
                  hours.pledgeHours < 100 ? hours.pledgeHours : 100,
                  hours.pledgeHours < 100 ? 100 - hours.pledgeHours : 0
                ],
                backgroundColor: [
                  '#01965e',
                  '#9da4b2'
                ],
                hoverOffset: 4
              }]
            }
          }
        );
      });
  });

Why is this error coming?

[satyasaadhak]

This works, but form some reasons, above one doesn't

new Chart(
  document.getElementById('January'),
  {
    type: 'doughnut',
    data: {
      datasets: [{
        label: 'Doughnut',
        data: [78, 22],
        backgroundColor: ["#01965e", "#9da4b2"],
        hoverOffset: 4
      }]
    }
  }
);

This works too

const Chart = require('chart.js/auto');

fetch("<APIENDPOINT>")
  .then(response => response.json())
  .then(volunteerHours => {
    console.log(volunteerHours);
    const datasets = volunteerHours.items.filter(hours => hours.year === new Date().getFullYear())
    .map(hours => {
      return {
        label: hours.month,
        data: [hours.pledgeHours < 100 ? hours.pledgeHours : 100, hours.pledgeHours < 100 ? 100 - hours.pledgeHours : 0],
        backgroundColor: ["#01965e", "#9da4b2"],
        hoverOffset: 4
      };
    });

    new Chart(
      document.getElementById('January'),
      {
        type: 'doughnut',
        data: {
          datasets
        }
      }
    );
  });

What I need is to create multiple individual doughnut charts. That is failing