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?

This isn't an answer to the above problem exactly but we have decided to use HighCharts instead. highcharts.com — Ben Cameron
– Ben Cameron, Commented Nov 24, 2016 at 11:52
I'm facing exactly the same problem right now, everything seems to work but it just renders a blank space where the chart is supposed to be, were you able to fix it? — Roberto
– Roberto, Commented Mar 5, 2017 at 17:09
Are you using webpack and do you see any errors in the browser console? — Ben Cameron
– Ben Cameron, Commented Mar 5, 2017 at 17:13
I solved it, basically the chart data is dynamic and is not ready by the time the chart renders so I initialized the chart with all the data set to 0, then updated the data after it's ready and finally call refresh() on the chart. — Roberto
– Roberto, Commented Mar 5, 2017 at 20:22
I am having same issue here with angular 6 and primeng charts. I am already using other components from the primeng library and I like it. Will try to delay and refresh as mentioned. I have also double checked the import of chart.js and it's done. — groo
– groo, Commented Aug 15, 2018 at 18:39

Emílio Andrade · Accepted Answer · 2017-09-03 21:39:09Z

2

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.

answered Sep 3, 2017 at 21:39

Emílio Andrade

814 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ThirstForKnowledge · Accepted Answer · 2020-04-16 03:32:20Z

0

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);
}

answered Apr 16, 2020 at 3:32

ThirstForKnowledge

1,3041 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular2 primeng chart not rendering

2 Answers 2

Comments

HTML part:

TypeScript part:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

HTML part:

TypeScript part:

Comments

Your Answer

Sign up or log in

Post as a guest

Related