# Creating Pie and Doughnut Plots

Learn how to create Pie and Doughnut charts with ActiveReportsJS.

## Content

## Introduction

Before creating and configuring **Pie and Doughnut Plots**, make sure you have added a chart to your report. For instructions on adding a chart and launching the `Chart Wizard`, see [Adding a Chart](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#adding-a-chart). Once the `Chart Wizard` is open, **select the Pie or Doughnut Plot type**, choose the dataset to visualize, and proceed to the **next page**.

## Plot Settings

The `Settings` page of the `Chart Wizard` for **Pie and Doughnut plots** structured as shown below:

![image](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.ee48ba.png)

It is divided into two sections:

### Data Series  

The **Fields** [collection](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#collection) defines the **Data Values** you want to visualize. These values determine the following visual properties:  

- **Arc Length of Each Circular Sector** – Represents the proportion of the corresponding **Data Value** relative to the total sum of all values.  
- **Color Assignment** – Each **part** of the whole is visually distinguished using a unique color.  

Typically, each value is an [aggregate expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/aggregates), such as `{Sum(SalesAmount)}`.  


### Series Groups

- **Field:** Select the field, or specify an expression, that determines how the **Pie or Doughnut Plot** is divided into slices. Each unique value in this field represents a distinct slice or segment. Common examples include **product types, sales channels, or expense categories**.  
- **Sort Direction:** Specify whether slices are arranged in **Ascending** or **Descending** order based on their corresponding data values.  

Once you have configured the **Data Values** and **Series Groups**, click `Next` to proceed to the [Preview and Final Adjustments](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#preview-and-final-adjustments) page to complete the chart creation.