import {DoughnutChart} from 'primeng/primeng';
For a doughnut 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-doughnutChart [value]="data1" width="300" height="300"></p-doughnutChart>
export class MyModel {
data1: any[];
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'
}];
}
}
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>"
onSegmentSelect event is triggered by passing the available selected segments when a user clicks on the chart.
<p-doughnutChart [value]="data" width="300" height="300" (onSegmentSelect)="onSegmentClick($event)"></p-doughnutChart>
export class MyModel {
onSegmentClick(event) {
//event.originalEvent = click event
//event.segments = array of selected segments
}
}
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 | true | 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 | hether 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 | 50 | The percentage of the chart that we cut out of the middle |
animationSteps | number | 100 | Amount of animation steps |
animationEasing | string | easeOutBounce | Whether the line is curved between points |
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 |
Name | Parameters | Description |
---|---|---|
onSegmentsSelect | event.originalEvent: click event event.segments: selected segments |
Callback to invoke when value of doughnutchart changes. |
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-doughnutChart [value]="data1" width="300" height="300"></p-doughnutChart>
</div>
<div class="ui-grid-col-6">
<h3 class="first">Interactive and Customized</h3>
<p-doughnutChart [value]="data2" width="300" height="300" (onSegmentsSelect)="onSegmentClick($event)"
[segmentShowStroke]="false" [animationSteps]="50" animationEasing="easeInOutQuint" [animateScale]="true"></p-doughnutChart>
</div>
</div>
</div>
<button type="button" (click)="removeYellow()" pButton icon="fa-minus" style="width:300px" *ngIf="!updated">Remove Yellow</button>
export class DoughnutChartDemo {
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;
}
}