PieChart A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.

Basic

Interactive and Customized

Import


import {PieChart} from 'primeng/primeng';

Getting Started

For a pie chart, you must pass in an array of objects with a value and an optional color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.


<p-pieChart [value]="data" width="300" height="300"></p-pieChart>


export class MyModel {

    data1: any[];

    constructor() {
        this.data = [{
                value: 300,
                color: '#F7464A',
                highlight: '#FF5A5E',
                label: 'Red'
            },
            {
                value: 50,
                color: '#46BFBD',
                highlight: '#5AD3D1',
                label: 'Green'
            },
            {
                value: 100,
                color: '#FDB45C',
                highlight: '#FFC870',
                label: 'Yellow'
            }];
    }

}

Legend

To display a legend, pass an element as a local template variable where legend content would be generated.


<p-barChart [value]="data" width="640" height="320" [legend]="lgnd"></p-barChart>
<div #lgnd></div>

Content of legend can be customized with legendTemplate attribute that defaults to;


"<ul class=\"<%=name.toLowerCase()%>-legend\">
    <% for (var i=0; i<datasets.length; i++){%>
        <li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>
    <%}%>
</ul>"

Event

onSegmentSelect event is triggered by passing the available selected segments when a user clicks on the chart.


<p-pieChart [value]="data" width="300" height="300" (onSegmentSelect)="onSegmentClick($event)"></p-pieChart>


export class MyModel {

    onSegmentClick(event) {
        //event.originalEvent = click event
        //event.segments = array of selected segments
    }

}

Attributes

Name Type Default Description
animation boolean true Whether to animate the chart
showScale boolean true If we should show the scale at all
scaleOverride boolean false If we want to override with a hard coded scale
scaleSteps number null The number of steps in a hard coded scale
scaleStepWidth number null The value jump in the hard coded scale
scaleStartValue number null The scale starting value
scaleLineColor string rgba(0,0,0,.1) Colour of the scale line
scaleLineWidth number 1 Pixel width of the scale line
scaleShowLabels boolean true Whether to show labels on the scale
scaleLabel string <%=value%> Interpolated JS string - can access value
scaleIntegersOnly boolean true hether the scale should stick to integers, not floats even if drawing space is there
scaleBeginAtZero boolean false Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleFontFamily string 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Scale label font declaration for the scale label
scaleFontSize number 12 Scale label font size in pixels
scaleFontStyle string normal Scale label font weight style
scaleFontColor string #666 Scale label font colour
responsive boolean false whether or not the chart should be responsive and resize when the browser does.
maintainAspectRatio boolean true whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
showTooltips boolean true Determines whether to draw tooltips on the canvas or not
tooltipFillColor string rgba(0,0,0,0.8) Tooltip background colour
tooltipFontFamily string 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Tooltip label font declaration for the scale label
tooltipFontSize number 14 Tooltip label font size in pixels
tooltipFontStyle string normal Tooltip font weight style
tooltipFontColor string #fff Tooltip label font colour
tooltipTitleFontFamily string 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Tooltip title font declaration for the scale label
tooltipTitleFontSize number 14 Tooltip title font size in pixels
tooltipTitleFontStyle string bold Tooltip title font weight style
tooltipTitleFontColor string #fff Tooltip title font colour
tooltipYPadding number 6 pixel width of padding around tooltip text
tooltipXPadding number 6 pixel width of padding around tooltip text
tooltipCaretSize number 6 Size of the caret on the tooltip
tooltipCornerRadius number 6 Pixel radius of the tooltip border
tooltipXOffset number 10 Pixel offset from point x to tooltip edge
tooltipTemplate string <%if (label){%><%=label%>: <%}%><%= value %> Template string for single tooltips
multiTooltipTemplate string <%= value %> emplate string for multiple tooltips
value array null An array of data to define segments.
width number null Width of canvas in pixels.
height number null Height of canvas in pixels.
segmentShowStroke boolean true Whether we should show a stroke on each segment
segmentStrokeColor string #fff The colour of each segment stroke
segmentStrokeWidth number 2 The width of each segment stroke
percentageInnerCutout number 0 The percentage of the chart that we cut out of the middle
animationSteps number 100 Amount of animation steps
animationEasing string easeOutBounce Animation easing effect
animateRotate boolean true Whether we animate the rotation of the Doughnut
animateScale boolean false Whether we animate scaling the Doughnut from the centre
legend element Element as a local template variable. Container of legend
legendTemplate string Template for legend content. A legend template

Events

Name Parameters Description
onSegmentsSelect event.originalEvent: click event
event.segments: selected segments
Callback to invoke when value of piechart changes.

Dependencies

Chart.js.


<p-growl [value]="msgs"></p-growl>

<div class="ui-grid ui-grid-responsive" style="margin-bottom:10px">
    <div class="ui-grid-row">
        <div class="ui-grid-col-6">
            <h3 class="first">Basic</h3>
            <p-pieChart [value]="data1" width="300" height="300"></p-pieChart>
        </div>
        <div class="ui-grid-col-6">
            <h3 class="first">Interactive and Customized</h3>
            <p-pieChart [value]="data2" width="300" height="300" (onSegmentSelect)="onSegmentClick($event)"
                        [segmentShowStroke]="false" [animationSteps]="50" animationEasing="easeInOutQuint" [animateScale]="true"></p-pieChart>
        </div>
    </div>
</div>
<button type="button" (click)="removeYellow()" pButton icon="fa-minus" style="width:300px" *ngIf="!updated" label="Remove Yellow"></button>


export class PieChartDemo {

    data1: any[];

    data2: any[];

    msgs: Message[];

    updated: boolean;

    constructor() {
        this.data1 = [{
                        value: 300,
                        color: '#F7464A',
                        highlight: '#FF5A5E',
                        label: 'Red'
                    },
                    {
                        value: 50,
                        color: '#46BFBD',
                        highlight: '#5AD3D1',
                        label: 'Green'
                    },
                    {
                        value: 100,
                        color: '#FDB45C',
                        highlight: '#FFC870',
                        label: 'Yellow'
                    }];

        this.data2 = [{
                        value: 125,
                        color: '#2196F3',
                        highlight: '#64B5F6',
                        label: 'Comedy'
                    },
                    {
                        value: 50,
                        color: '#673AB7',
                        highlight: '#9575CD',
                        label: 'Drama'
                    },
                    {
                        value: 75,
                        color: '#00897B',
                        highlight: '#26A69A',
                        label: 'Action'
                    },
                    {
                        value: 22,
                        color: '#FF9800',
                        highlight: '#FFB74D',
                        label: 'Romance'
                    },
                    {
                        value: 100,
                        color: '#FF5722',
                        highlight: '#FF8A65',
                        label: 'Sci-fi'
                    }];
    }

    onSegmentClick(event) {
        if(event.segments) {
            this.msgs = [{severity: 'info', summary: 'Segment Selected', 'detail': event.segments[0].label}];
        }
    }

    removeYellow() {
        this.data1.pop();
        this.updated = true;
    }
}