import {RadarChart} from 'primeng/primeng';
A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
<p-radarChart [value]="data" width="640" height="320"></p-radarChart>
export class MyModel { data: any; msgs: Message[]; constructor() { this.data = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 90, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 96, 27, 100] } ] } } }
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>"
onPointsSelect event is triggered by passing the available selected points when a user clicks on the chart.
<p-radarChart [value]="data" width="640" height="320" (onPointsSelect)="onSelect($event)"></p-radarChart>
export class MyModel { onSelect(event) { //event.originalEvent = click event //event.points = array of selected points } }
Name | Type | Default | Description |
---|---|---|---|
animation | boolean | true | Whether to animate the chart |
animationSteps | number | 60 | Number of animation steps |
animationEasing | string | easeOutQuart | Animation easing effect |
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 | |
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 |
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 object with labels and datasets as array properties. |
width | number | null | Width of canvas in pixels. |
height | number | null | Height of canvas in pixels. |
scaleShowLine | boolean | true | Whether to show lines for each scale point |
angleShowLineOut | boolean | true | Whether we show the angle lines out of the radar |
scaleShowLabels | boolean | false | Whether to show labels on the scale |
scaleBeginAtZero | boolean | true | Whether the scale should begin at zero |
angleLineColor | string | rgba(0,0,0,.1) | Colour of the angle line |
angleLineWidth | number | 1 | Pixel width of the angle line |
pointLabelFontFamily | string | Arial | Point label font declaration |
pointLabelFontStyle | string | normal | Point label font weight |
pointLabelFontSize | number | 10 | Point label font size in pixels |
pointLabelFontColor | string | #666 | Point label font colour |
pointDot | boolean | true | Whether to show a dot for each point |
pointDotRadius | number | 3 | Radius of each point dot in pixels |
pointDotStrokeWidth | number | 1 | Pixel width of point dot stroke |
pointHitDetectionRadius | number | 20 | mount extra to add to the radius to cater for hit detection outside the drawn point |
datasetStroke | boolean | true | Whether to show a stroke for datasets |
datasetStrokeWidth | number | 2 | Pixel width of dataset stroke |
datasetFill | boolean | true | Whether to fill the dataset with a colour |
legend | element | Element as a local template variable. | Container of legend |
legendTemplate | string | Template for legend content. | A legend template |
Name | Parameters | Description |
---|---|---|
onPointsSelect | event.originalEvent: selected event event.points: selected points |
Callback to invoke when value of radarchart changes. |
Chart.js
<p-growl [value]="msgs"></p-growl> <h3 class="first">Basic</h3> <p-radarChart [value]="data" width="640" height="320"></p-radarChart> <h3>Interactive and Customized</h3> <p-radarChart [value]="data" width="640" height="320" [scaleShowLine]="false" [angleLineWidth]="5" [pointDot]="false" [datasetFill]="false" (onPointsSelect)="onSelect($event)"></p-radarChart>
export class RadarChartDemoComponent { data: any; msgs: Message[]; constructor() { this.data = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 90, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 96, 27, 100] } ] } } onSelect(event) { if(event.points) { this.msgs = []; for(var i = 0; i < event.points.length; i++) { this.msgs.push({severity: 'info', summary: 'Point Selected', 'detail': event.points[i].label + ' ' + event.points[i].value}); } } } }