A pie chart (or a circle chart) is a circular statical graphic, which is divided into slices to illustrate the numerical proportion of composite data. The arch length of each slice is equal to the quantity of data entity. A basic example of the pie chart usage regarding the Prime libraries downloads would be as follows:

<p-chart #pie type="pie" [data]="piedata" width="300" height="100">
</p-chart>

The component class should define the pie chart data with three slices for three prime libraries over the period of time, as shown here:

this.piedata = {
  labels: ['PrimeNG', 'PrimeUI', 'PrimeReact'],
  datasets: [
    {
      data: [3000, 1000, 2000],
      backgroundColor: [
        "#6544a9",
        "#51cc00",
        "#5d4361"
      ],
      hoverBackgroundColor: [
        "#6544a9",
        "#51cc00",
        "#5d4361"
      ]
    }
  ]
};

The following screenshot shows a snapshot result of the pie chart with PrimeNG, PrimeUI, and PrimeReact downloads over the time period of a year as an example:

By hovering over each pie chart slice, you can observe the respective data label and it's value.

A doughnut chart is a variant of the pie chart, with a blank hollow center allowing for the additional information about the complete data (that is, each slice represents specific unique data and the general additional information applies to all slices represented by the center circle).

A basic example of doughnut chart usage for Prime libraries downloads would be as follows:

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

The component class should define the pie chart data with three slices for three Prime libraries over the period of time, as shown here:

this.doughnutdata = {
  labels: ['PrimeNG', 'PrimeUI', 'PrimeReact'],
  datasets: [
    {
      data: [3000, 1000, 2000],
      backgroundColor: [
        "#6544a9",
        "#51cc00",
        "#5d4361"
      ],
      hoverBackgroundColor: [
        "#6544a9",
        "#51cc00",
        "#5d4361"
      ]
    }
  ]
};

The following screenshot shows a snapshot result of the doughnut chart with PrimeNG, PrimeUI, and PrimeReact downloads over the time period of a year as an example:

By default, the cutout percentage of the doughnut chart is 50 (where as for pie chart it is 0). This can be customized through the cutoutPercentage chart option.