# Pie and Doughnut Plots

Learn how to configure Pie and Doughnut charts with ActiveReportsJS.

## Content

## Overview  
**Pie** and **Donut** plots are used to visualize the **proportions of a whole**, making it easy to compare the relative sizes of different parts within a dataset.  
- A **Pie Plot** represents **Data Values** as a **full disk** divided into slices.  
- A **Donut Plot** (also called a **Doughnut Plot**) represents **Data Values** as a **ring**, with slices appearing as segments.  

In both cases, the **arc length of each slice or segment** is **proportional to its corresponding Data Value**, effectively illustrating its share of the whole.  
For clarity, we use the term **circular sector** to refer to both **Pie slices** and **Donut segments**. The examples below emphasize **Data Values** in bold and their *Parts* in italics.  

## Single Value Pie Plot  
A **Single Value Pie Plot** visualizes how different **parts** contribute to a **single Data Value**, making it easy to compare proportions within a whole.  
For example, the [Pie Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/PiePlot/purejs) illustrates the **contribution of product categories** to the overall **Net Sales**, with each category represented as a distinct slice of the pie.  

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/PieExample.png)

## Multiple Value Doughnut Plot  
A **Multiple Value Doughnut Plot** allows for the visualization of **several Data Values** within a common set of **categories**, making it easier to compare multiple aspects of a dataset in a single view.  
For example, the [Doughnut Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/DoughnutPlot/purejs) illustrates how different **product categories** contribute to **Discounts, Returns, and Unit Cost**, with each ring representing a distinct metric while maintaining a unified categorical structure.  

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/DoughnutExample.png)

## Circular Bar Plot  
A **Circular Bar Plot** is a variation of the Doughnut Plot where **segments are placed next to each other**, creating a bar-like appearance in a circular layout. This visualization effectively compares multiple data values while maintaining a radial structure.  
For example, the [Circular Bar Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/CircularBarPlot/purejs) illustrates the **contribution of sales channels** to **Net Income**, with each segment representing a different channel’s proportional share.  

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/CircularBarExample.png)

You can configure all these types using the `Pie` template and its properties described in the following sections. The `Doughnut` template is just a shortcut to a pre-configured `Inner Radius` property value.

You can use the following demos to explore plot properties - open a link, toggle the [Report explorer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer), select the `Plot - Plot 1` node and use the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel) to modify the configuration.

* [Pie Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/PiePlot/purejs)
* [Doughnut Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/DoughnutPlot/purejs)
* [Circular Bar Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/CircularBarPlot/purejs)

You could also download the report files listed below and open them in the [Standalone Report Designer](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App).

* [Pie Plot report](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/PiePlot/purejs/PiePlot.rdlx-json)
* [Doughnut Plot report](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/DoughnutPlot/purejs/DoughnutPlot.rdlx-json)
* [Circular Bar Plot report](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/CircularBarPlot/purejs/CircularBarPlot.rdlx-json)