Pie Chart Labels are broken

[MasterCash]

It looks like that the labels are broken with Pie Chart labels in the latest ChartJs

chartjs-plugin-datalabels.esm.js:118 Uncaught TypeError: Cannot read properties of null (reading 'x')
    at orient (chartjs-plugin-datalabels.esm.js:118:19)
    at Object.fallback [as positioner] (chartjs-plugin-datalabels.esm.js:342:13)
    at coordinates (chartjs-plugin-datalabels.esm.js:838:21)
    at Object.draw (chartjs-plugin-datalabels.esm.js:1009:18)
    at Object.afterDatasetsDraw (chartjs-plugin-datalabels.esm.js:1302:12)
    at callback (helpers.core.ts:109:15)
    at PluginService._notify (core.plugins.js:60:11)
    at PluginService.notify (core.plugins.js:42:25)
    at Chart.notifyPlugins (core.controller.js:1148:26)
    at Chart._drawDatasets (core.controller.js:787:10)

Originally posted by @tedik123 in https://github.com/chartjs/chartjs-plugin-datalabels/issues/380#issuecomment-1631647819

There is a PR #380 which looks like it fixes this problem, according to the PR it is an issue where instanceof no longer works in newer versions of ChartJs

[MasterCash]

would be really great to get this fixed.

[simonbrunel]

@MasterCash If instanceof does not work, it's probably because your project compiles 2 different versions of Chart.js. If you are sure that it's not the case, please provide a codepen that reproduces this issue. Note that PR #380 does provide a proper fix.

[COV-GIS]

I just ran into the same error. A few months ago I updated a couple apps to chart js 4.x using data labels 2.2.0. Everything was working fine in dev and deployment until yesterday when the doughnut chart with labels failed to render and throws the above error. There has been no code changes. Additionally, bar chart labels are also having alignment issues but throw no errors. None of the alignment options are working.

They were just centered horizontally by default. And again...no option can effect the position.

This is possibly (???) a jsdelivr +esm issue as my refactor went module with imports like:

import {
  Chart,
  DoughnutController,
  ArcElement,
  Title,
  Tooltip,
} from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import ChartDataLabels from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

I'm removing labels as a temporary fix. And any suggestions as to what may be causing this would be appreciated.

My charts config is complex and data is dynamic so not good for reproduction. I'm going to keep digging into this. And see if I can get a pen up to reproduce.