plugin doesn't seem to load when running under Angular and clicking a bar immediately

[cmsImagine]

I am using the example bar chart configuration in an Angular component.

I create the chart in ngOnInit() like the example code. If I click a bar immediately after the page load the plugin doesn't seem to work. Subsequent clicks or even hard reloading the browser doesn't fix it. No error is logged to the console.

If I wait 1 second before clicking on a bar the plugin works as expected. So, to get around this I just load the chart using setTimeout() with 1 second.

[chrispahm]

Hey @cmsImagine, thanks for raising an issue! Sorry for the inconvenience but I'd really need to see a minimum working example for reproducing your error before getting active. Anything hosted on jsFiddle/Plunkr/CodeSandbox would be sufficient!

Best Christoph

[cmsImagine]

@chrispahm Here is a plunker showing the behavior: https://plnkr.co/edit/7p8X627JxdWk9uS7?open=lib%2Fapp.ts&deferRun=1&preview

I cannot reproduce it exactly how I described in the plunker but this is what happens. The chart loads but isn't draggable. Adding a setTimeout() with 1 second wait didn't fix it in the plunker like it does for me with Angular 7 working locally.

[chrispahm]

Hey there,

is there a particular reason why you would embed the Chart.js and plugin-dragdata packages in the html file via CDN instead of requiring them in the app.ts module (aka adding them to the dependencies in the package.json file)? First off, if you really want to use a CDN, I would recommend you to load the dragdata-plugin right after the Chart.js main file at the top of the page. This way you can be sure its contents are available when the content is rendered. Other than that, there seems to be some issue (probably related to caching) that sometimes leads to the dragdata plugin being interpreted before the Chart.js main module is available. In those cases, dragging data is not working as expected. Here's a tiny updated to your example showcasing this: https://plnkr.co/edit/s2aPrPExAmp8gnQc?open=lib%2Fapp.ts&deferRun=1&preview

I really wouldn't recommend to do this though. The updated example worked in > 90% of the reloads I tried (also different browsers), but since I don't really know why it sometimes loads as expected and sometimes not, this shouldn't be an option. If you really rely on using a CDN (which I highly doubt), you might want to ask a question on StackOverflow...

As you can see in this working Angular example (https://stackblitz.com/edit/ng2-charts-g-p5umdc?file=package.json), importing the module in a component works as it should, and produces more reliable results.

As this isn't really isn't an issue with the plugin, but rather how it is loaded in your app, would you mind me closing this?

[cmsImagine]

Adding import 'chartjs-plugin-dragdata'; to my component imports fixed the issue. Previously I just loaded chartjs-plugin-dragdata.min.js in the scripts node in angular.json

[chrispahm]

Nice! Good to hear that it works now!