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; } }