Critical: Cannot read properties of undefined (reading '_labels') <> Angular 12

[vatsal2210]

Here are my chart.js versions:

Error: Cannot read properties of undefined (reading '_labels')

Problem statement:

I can't produce the workflow or step-by-step why it creates an issue. I make sure labels are assigned before I load a chart.

Still doesn't understand the exact cause of the issue.

Versions:

 "chart.js": "3.7.0",
  "chartjs-plugin-datalabels": "2.0.0",

The full error:

core.js:7744 ERROR TypeError: Cannot read properties of undefined (reading '_labels')
    at Object.afterDatasetsDraw (chartjs-plugin-datalabels.esm.js:1304:43)
    at callback (helpers.segment.js:92:15)
    at PluginService._notify (chart.esm.js:4922:19)
    at PluginService.notify (chart.esm.js:4909:25)
    at Chart.notifyPlugins (chart.esm.js:6047:26)
    at Chart._drawDatasets (chart.esm.js:5797:10)
    at Chart.draw (chart.esm.js:5768:10)
    at chart.esm.js:64:15
    at Map.forEach (<anonymous>)
    at Animator._update (chart.esm.js:42:18)

Is there anything else I should provide to find the issue? I appreciate any help, as it is impacting our production environment charts.

[simonbrunel]

We really need a way to reproduce this issue such as a CodePen or a repository.

[serhii-kucherenko]

I had the same issue. Seems if you have 2 and come charts on the same page and not all of them using datalabels it still tries to read those labels

[encongithubuser]

In my case the solution was to initially set some default data in the line configuration before I populate it. Because I get data from the API, it comes in later, and sometimes I got this error. Now if I initialize the ChartConfiguration like this, the error is gone:

lineChartData: ChartConfiguration['data'] =
{datasets : [{ data: [0], label: 'S1', backgroundColor: '#1DAA68', borderColor: '#4BA87D', type: 'bar' },
{ data: [0], label: 'S2', backgroundColor: 'rgba(0,112,192,0.2)', borderColor: '#4BA87D', type: 'bar' },
{ data: [0], label: 'S3', backgroundColor: 'rgba(0,176,80,0.2)', borderColor: '#4BA87D', type: 'bar' }
], labels : ['']};

When the chart is loaded, you will see that there is a short moment its set to the initial state and later filled. I aleady tried to hide the chart before the data was loaded, but it didn't helped in my case.