Chartjs не может читать наборы данных свойств undefined

Я разрабатываю приложение React и пытаюсь заставить Chartjs работать, импортировав его из своего пакета npm. Ниже приведен код инициализации:

//in my constructor
this.usageChart = null;

//in componentDidMount
let chartContext = document.getElementById("proc_usage");
let initialDataIdle = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
let initialDataOther = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

console.log("Creating chart");
this.usageChart = new Chart(chartContext, {
  type: "line",
  data: {
    datasets: [
      { label: "User", fill: true, data: initialDataOther, backgroundColor: "rgba(244, 143, 177, 0.8)" },
      { label: "System", fill: true, data: initialDataOther, backgroundColor: "rgba(255, 235, 59, 0.8)" },
      { label: "IRQ", fill: true, data: initialDataOther, backgroundColor: "rgba(100, 181, 246, 0.8)" },
      { label: "Idle", fill: true, data: initialDataIdle, backgroundColor: "rgba(150, 150, 150, 0.4)" }
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    },
    plugins: {
      stacked100: { enable: true }
    }
  }
});
console.log("Chart created: " + this.usageChart.data);

Проблема в том, что когда я пытаюсь обновить диаграмму, this.usageChart.data есть undefined. Фактически, в последнем последнем вызове console.log() во время инициализации это также undefined. Я не вижу, что я делаю неправильно. Я загружаю плагин, который позволяет рисовать линейную диаграмму в виде укладки с областью между строками, представляющими процент. Я не знаю, возможно ли этот плагин, но я не получаю никаких ошибок об этом, и код был более или менее приведен дословно из кода примера плагина.

Вот код, где я обновляю диаграмму:

//from componentDidUpdate
usages['User'] = userUsage;
usages['System'] = sysUsage;
usages['IRQ'] = irqUsage;
usages['Idle'] = idleUsage;

console.log("updating chart");
this.usageChart.data.datasets.forEach((dataset) => {
  dataset.data.shift();
  dataset.data.push(usages[dataset.label]);
});
this.usageChart.update();
console.log("chart updated");

Ответ 1

Оказывается, я использовал неправильный пакет npm.

Будьте осторожны, кто-то сидит в течение 2 лет над именем chartjs с устаревшим, устаревшим реестром github. Настоящее имя пакета chart.js. Очень раздражает.

Ответ 2

Я создал fiddle (я просто скопировал ваш код в пользовательский компонент) для вас, и в моем случае нет ошибки.

Я думаю, что здесь есть ошибка, так как ваша диаграмма не обновляется должным образом:

this.usageChart.data.datasets.forEach((dataset) => {
  dataset.data.shift();
  dataset.data.push(usages[dataset.label]);
});

Исправленная версия:

Вы ошибочно обновляли наборы данных:

this.usageChart.data.datasets.forEach((dataset) => {
  dataset.data.shift();
  dataset.data = usages[dataset.label];
});

Пожалуйста, проверьте рабочий fiddle и сравните его с вашим проектом.