A radar chart is a graphical representation of displaying the multivariant data in the form of a two-dimensional chart. It has at least three or more quantitative variables represented on axes starting from the same point. This chart is also called the spider chart or star chart. It is useful in measuring performance metrics of any ongoing program to control the quality of improvement.

A basic example of radar chart usage for a PrimeNG and a PrimeReact project's progress would be as follows:

<p-chart type="radar" [data]="radardata" width="300" height="100">
</p-chart>

The component class should define the radar chart data with two datasets (PrimeNG and PrimeReact) for six phases of an SDLC process as shown here:

this.radardata = {
  labels: ['Requirement', 'Design', 'Implementation', 'Testing', 
    'Deployment', 'Maintainance'],
  datasets: [
    {
      label: 'PrimeNG',
      backgroundColor: 'rgba(162,141,158,0.4)',
      borderColor: 'rgba(145,171,188,1)',
      pointBackgroundColor: 'rgba(145,171,188,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(145,171,188,1)',
      data: [76, 55, 66, 78, 93, 74]
    },
    {
      label: 'PrimeReact',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      pointBackgroundColor: 'rgba(255,99,132,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(255,99,132,1)',
      data: [30, 43, 38, 17, 89, 33]
    }
  ]
};

In the preceding example, the datasets are not only referred to the data components but also provide skinning to the chart using background, border color, and so on. The following screenshot shows a snapshot result of the radar chart with a PrimeNG and a PrimeReact project's progress over six phases of the SDLC life cycle process as an example:

Polar area charts are similar to pie charts, but each segment has the same angle (that is, 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 just similar to a pie chart. But, you can also show a scale of values for the given context.

A basic example of a polar chart usage for Prime product libraries downloads would be as follows:

<p-chart type="polarArea" [data]="polardata" width="300" height="100">
</p-chart>

The component class should define polar chart downloads data for various Prime libraries as follows:

this.polardata = {
  datasets: [{
    data: [45, 35, 10, 15, 5],
    backgroundColor: ["#6544a9", "#51cc00", "#5d4361", "#E7E9ED", 
    "#36A2EB"],
    label: 'Prime Libraries'
  }],
  labels: ["PrimeFaces", "PrimeNG", "PrimeReact", "PrimeUI", 
    "PrimeMobile"]
}

The component class creates the data options along with skinning properties. The following screenshot shows a snapshot result of the polar chart with PrimeFaces, PrimeNG, PrimeUI, PrimeReact, and PrimeMobile downloads for the time period of a year as an example:

Based on the datasets, min and max values are provided, and polar chart data segment values will be adjusted (1, 2, 3, 4, 50).