Angular2 primeng chart not rendering

Question

I have an Angular2 application that is trying to render a PrimeNG line chart ( http://www.primefaces.org/primeng/#/chart/line ). The problem is that the page shows no error or 404's but the grid doesn't render and there is just a blank space on the page.

I have installed the chartjs and the prime packages via npm.

I have included https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js in my index.html

My component html contains...

<p-chart type="line" [data]="data1" width="1000"></p-chart>

Where data1 is set to the below in the ts file constructor...

this.data1 = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
            {
                label: 'First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: '#4bc0c0'
            },
            {
                label: 'Second Dataset',
                data: [28, 48, 40, 19, 86, 27, 90],
                fill: false,
                borderColor: '#565656'
            }
        ]
    }

My app.module has the ChartModule as an import.

When the page loads and I inspect the area I see the generated canvas that is supposed to hold the chart.

Does anyone have any ideas what might be wrong?

Answer 1

First of all you should install char.js in your angular2 app: npm install chart.js --save And then import that in your o main module like "app.module.ts" import 'chart.js/dist/Chart.min.js'; I am using the same prime's chart component like you.

Answer 2

The original question is already a few years old, but the challenge still exists in April 2020 with PrimeNG 9.0.5. If you have installed chart.js as described in the question and other answers, imported and included all components correctly and still only an empty placeholder is displayed instead of the pie chart, the following procedure will probably help you:

HTML part:

<p-chart #chart type="pie" [data]="chartData"></p-chart>

TypeScript part:

@ViewChild('chart') chart: any;

[...]

ngOnInit(): void {
  setTimeout(() => {
    this.chart.refresh();
  }, 100);
}