RadarChart A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

Basic

Interactive and Customized

Import


import {RadarChart} from 'primeng/primeng';

Getting Started

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

}

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

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
    }

}

Attributes

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

Events

Name Parameters Description
onPointsSelect event.originalEvent: selected event
event.points: selected points
Callback to invoke when value of radarchart changes.

Dependencies

Chart.js 1.0.2.


<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 RadarChartDemo {

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

        }
    }
}