Angular PrimeNG p-chart chartsjs is not showing

Question

I am following the p-chart aka chartjs example on https://primefaces.org/primeng/showcase/#/chart/pie but it is not rendering on the page.

I am not sure what step I am missing. I used the chrome tool and the inspect sees the p-chart but on the page, it is white.

Any help is appreciated.

I read in another post to add the angular.json

"scripts": [

          "node_modules/chart.js/dist/chart.js"
        ]

In my html

<div class="container-fluid container-width"> 
    <div class="card">
      
            <p-chart type="pie" [data]="data" [options]="chartOptions"  [style]="{'width': '70%'}"></p-chart>
       
     </div>
</div>

in my TS

  ngOnInit(): void {
    this.data = {
      labels: ['A','B','C'],
      datasets: [
          {
              data: [300, 50, 100],
              backgroundColor: [
                  "#42A5F5",
                  "#66BB6A",
                  "#FFA726"
              ],
              hoverBackgroundColor: [
                  "#64B5F6",
                  "#81C784",
                  "#FFB74D"
              ]
          }
      ]
  };

  this.chartOptions =  this.getLightTheme();
  }
 
  
getLightTheme() {
  return {
      plugins: {
          legend: {
              labels: {
                  color: '#495057'
              }
          }
      }
  }
}

In my app.module.ts

import { ChartModule } from 'primeng/chart';

@NgModule({

  declarations: [
    SearchComponent,
    TableComponent,
    TrimPipe
  ],
  imports: [
    CommonModule,
    ChartModule
  ],
  exports: [],

  providers:[ConfirmationService, MessageService]
})

Answer 1

If anyone is stuck where p-chart shows nothing, check you chrome console log. If you get any Is not a controller, following this

Uninstall chart.js and install chart.js@2.9.4

Finally found a post that explained what was going on.

core.js:4197 ERROR TypeError: chart.js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor

Hope this helps. I was stuck for 2 days.