PolarAreaChart Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

Basic

Interactive and Customized

Import

import {PolarAreaChart} from 'primeng/primeng';

Getting Started

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

<p-polarAreaChart [value]="data" width="300" height="300"></p-polarAreaChart>
export class MyModel {

    data: any[];

    msgs: Message[];

    updated: boolean;

    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"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }];
    }

}

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-polarAreaChart [value]="data" width="300" height="300" (onSegmentsSelect)="onSegmentClick($event)"></p-polarAreaChart>
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
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.
scaleShowLabelBackdrop boolean true Show a backdrop to the scale label
scaleBackdropColor string rgba(255,255,255,0.75) The colour of the label backdrop
scaleBeginAtZero boolean true Whether the scale should begin at zero
scaleBackdropPaddingY number 2 The backdrop padding above & below the label in pixels
scaleBackdropPaddingX number 2 The backdrop padding to the side of the label in pixels
scaleShowLine boolean true Show line for each value in the scale
segmentShowStroke boolean true Stroke a line around each segment in the chart
segmentStrokeColor string "#fff" The colour of the stroke on each segement.
segmentStrokeWidth number 2 The width of the stroke value in pixels
animationSteps number 100 Amount of animation steps
animationEasing string easeOutBounce Animation easing effect.
animateRotate boolean true Whether to animate the rotation of the chart
animateScale boolean false Whether to animate scaling the chart 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 polarareachart 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-polarAreaChart [value]="data" width="300" height="300"></p-polarAreaChart>
        </div>
        <div class="ui-grid-col-6">
            <h3 class="first">Interactive and Customized</h3>
            <p-polarAreaChart [value]="data" width="300" height="300" animationEasing="easeInOutQuint" [scaleShowLine]="false" (onSegmentsSelect)="onSegmentClick($event)"></p-polarAreaChart>
        </div>
    </div>
</div>
export class PolarAreaChartDemo {

    data: any[];

    msgs: Message[];

    updated: boolean;

    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"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }];
    }

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