Chart component should runOutsideOfAngular

[steverob2k]

Describe the bug

Migrated a very large angular v13/primeng v13/chart.js 3.9.0 application to angular v16/primeng v16/chart.js v4.4.0 app.

The application uses a 3rd party grid (not primeng) next to the primeng chart component. When the filter menu of that 3rd party grid is clicked it causes the page to become unresponsive. The page does not crash completely but seems to going around in circles. This only seems to happen if the chart has responsive set to true. Setting to false is a workaround but obviously, the charts do not look correct.

I believe this issue is caused by chart.js itself and not the primeng wrapper for it. It seems to be being triggered a lot by angular change detection firing events.

As part of problem-solving this issue, I looked at other angular libraries which wrap chart.js. All reported similar issues with change detection. The ultimate solution for this is to wrap the instantiation of a Chart in a runoutsideAngular method.

this.zone.runOutsideAngular(() => {
                this.chart = new Chart(this.el.nativeElement.children[0].children[0], {
                    type: this.type,
                    data: this.data,
                    options: this.options,
                    plugins: this.plugins
                });
            })

I made local changes to the chart component to do just this and the issue is no longer there. As a side note, I also saw a percieved improvement in performance on the chart, particularly with mouseover events when there are lots of charts on the screen.

I have created a PR for the above change #14560

Environment

Using primeng v16.8.0 but the issue is still there on v17 branch. Chart.js v4.4.0

Reproducer

No response

Angular version

16

PrimeNG version

16.8.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16

Browser(s)

Chrome

Steps to reproduce the behavior

For perceived performance improvement, add lots of charges and mouseover.

Expected behavior

Chart.js does not need to react to angular change detection