Primeng Pie chart not displaying

Question

I want to display pie chart in my dashboard screen. Followed the example in primefaces website. But it is not working. Below is my code. Please let me know whether i am missing any imports.

app.module.ts

   import {ChartModule} from 'primeng/primeng';

    @NgModule({
    --
    --
    imports: [
    --
    --
    ChartModule

component.ts

  piedata: any;


 ngOnInit() {

  this.piedata = {
            labels: ['A','B','C'],
            datasets: [
                {
                    piedata: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
            };
}

Html page

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

** Output **

Vikhyath Maiya Vikhyath Maiya · Accepted Answer · 2017-08-10T13:29:08

You need chart.js for it to function.do

npm install chart.js --save

and include that in your angular-cli.json file

"scripts": [
 "../node_modules/chart.js/dist/Chart.js",
 //..others
 ],

Hope this helps

Update: Try this

 ngOnInit() {

  this.piedata = {
            labels: ['A','B','C'],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
            };
}

Primeng Pie chart not displaying

1 Answers