Primeng pie chart throws error in Angular2

Question

I am trying to create pie chart using primeng beta 9 version.

Below is my sample code-

import { Component } from '@angular/core';
import { UIChart, Message } from 'primeng/primeng';

@Component({
    template: `
    <h2> This is Chart.js component </h2>
    <br/><br/>

                <p-chart type="pie" [data]="data" width="300" height="300" 
                        [segmentShowStroke]="false" [animationSteps]="50" animationEasing="easeInOutQuint" [animateScale]="true"></p-chart>

    `,
    directives: [UIChart]
})


export class ChartComponent {
    data: any[];

    constructor() {


        this.data = [{
                        value: 125,
                        color: '#2196F3',
                        highlight: '#64B5F6',
                        label: 'Football'
                    },
                    {
                        value: 50,
                        color: '#673AB7',
                        highlight: '#9575CD',
                        label: 'Pool'
                    },
                    {
                        value: 75,
                        color: '#00897B',
                        highlight: '#26A69A',
                        label: 'Tennis'
                    },
                    {
                        value: 22,
                        color: '#FF9800',
                        highlight: '#FFB74D',
                        label: 'Basketball'
                    },
                    {
                        value: 100,
                        color: '#FF5722',
                        highlight: '#FF8A65',
                        label: 'Cricket'
                    }];
    }                


}

On compilation, it doesn't shows any error. but browser shows error as -

ORIGINAL EXCEPTION: TypeError: i.labels is undefined

Please let me know whats wrong here.

Answer 1

Another option is to use data like this-

data: any;

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

See if this helps.