Data labels are flickering and not positioned properly when consumed in react and angular JavaScript Library and framework

[praneash456]

Please make use of the below public sample repository to reproduce the issue:
Chart-js-lit
Go through the README.md file in the repo to start the application and see the issue.

Actual Issue and result:
We have developed a custom element using Lit, which utilizes Chart.js to render a canvas. This web component is then consumed in both React and Angular applications. When we pass chartjs-plugin-datalabels as a custom plugin (i.e inline - registry), the data labels initially appear in the correct position as specified in the plugin configuration (inside the options). However, they suddenly shift, and the data label for a specific bar is repositioned to the bottom of the next bar.

When you serve the application, it is clearly visible that the data label is supposed to be positioned at the top of the bar chart according to the configuration, but it flickers, drifts away, and eventually settles at the bottom.

Expected Result:
The data labels should remain positioned as specified in the plugin options.

Note:
We suspected this issue may be due to lifecycle timing or rendering mismatches due to which the plugin is unregistered or something. We have tried multiple solutions, but none have worked so far. The only workaround we have found is to register chartjs-plugin-datalabels inside the Lit component itself (global registry). However, we would prefer not to do this for public chartjs dependent libraries, as it would require us to provide the package as a peer dependency and would increase the bundle size for our consumers for those do not even want this specific feature.