# Creating a Pie Plot

Learn how to create a pie plot chart using code or using designer and customize it for displaying sales of electronic products in a store.

## Content

You can create a pie plot chart using code or the designer. The following image shows a Pie Plot type chart for sales of electronic products.
![](https://cdn.mescius.io/document-site-files/images/2238e618-a1fb-45a6-9ce5-9a4157bd2931/images/plottypes-pie.png)
For details on the API, see the [PiePlotArea](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.PiePlotArea.html) class. Also, to create a pie chart, use the [PieSeries](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.PieSeries.html) class that represents the data series of the circle chart.

> !type=note
> **Note:**
>
> * To set the pie detachments, set the [PieDetachments](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.PieSeries.PieDetachments.html) property of the PieSeries class.
> * To create a donut chart, set the size of the hole in the center of the circle chart with the [HoleSize](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.PiePlotArea.HoleSize.html) property of the PiePlotArea class.

## Using code

1. Create a [PieSeries](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.PieSeries.html) object that represents the data series for the circle chart and add the data.
2. Create a [PiePlotArea](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.PiePlotArea.html) object that represents the plot area and set its position and size.
3. Add a data series to the plot area.
4. Create labels and legend areas.
5. Create a [ChartModel](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.ChartModel.html) object and add plot areas, labels, and legend areas.
6. Assign a chart model to the chart.

## Example

The following example creates a pie chart to display the annual sales of electronic products (Mobile Phones, Laptops, Tablets) in a store.

```csharp
// Creating Pie Chart
fpSpread1.Sheets[0].Cells[0, 0].Text = "Products";
fpSpread1.Sheets[0].Cells[1, 0].Text = "Mobile Phones";
fpSpread1.Sheets[0].Cells[2, 0].Text = "Laptops";
fpSpread1.Sheets[0].Cells[3, 0].Text = "Tablets";
fpSpread1.Sheets[0].Cells[0, 1].Text = "Product Sales - FY2018 (Mn)";
fpSpread1.Sheets[0].Cells[1, 1].Value = 59.3;
fpSpread1.Sheets[0].Cells[2, 1].Value = 34.7;
fpSpread1.Sheets[0].Cells[3, 1].Value = 18.2;
CurrencyCellType currencycell = new CurrencyCellType();
currencycell.DecimalPlaces = 2;
currencycell.ShowCurrencySymbol = true;
currencycell.CurrencySymbol = "$";
fpSpread1.Sheets[0].Cells[1, 1, 3, 1].CellType = currencycell;

FarPoint.Win.Spread.Chart.SpreadChart chart = fpSpread1.Sheets[0].AddChart(0, 0, typeof(FarPoint.Win.Chart.PieSeries), 400, 370, 240, 30);
FarPoint.Win.Chart.PieSeries series = (FarPoint.Win.Chart.PieSeries)chart.Model.PlotAreas[0].Series[0];
series.LabelVisible = true;
series.LabelContainsCategoryName = true;
series.LabelContainsValue = true;
```

```vbnet
// Creating Pie Chart
fpSpread1.Sheets(0).Cells(0, 0).Text = "Products"
fpSpread1.Sheets(0).Cells(1, 0).Text = "Mobile Phones"
fpSpread1.Sheets(0).Cells(2, 0).Text = "Laptops"
fpSpread1.Sheets(0).Cells(3, 0).Text = "Tablets"
fpSpread1.Sheets(0).Cells(0, 1).Text = "Product Sales - FY2018 (Mn)"
fpSpread1.Sheets(0).Cells(1, 1).Value = 59.3
fpSpread1.Sheets(0).Cells(2, 1).Value = 34.7
fpSpread1.Sheets(0).Cells(3, 1).Value = 18.2
Dim currencycell As CurrencyCellType = New CurrencyCellType()
currencycell.DecimalPlaces = 2
currencycell.ShowCurrencySymbol = True
currencycell.CurrencySymbol = "$"
fpSpread1.Sheets(0).Cells(1, 1, 3, 1).CellType = currencycell

Dim chart As FarPoint.Win.Spread.Chart.SpreadChart = fpSpread1.Sheets(0).AddChart(0, 0, GetType(FarPoint.Win.Chart.PieSeries), 400, 370, 240, 30)
Dim series As FarPoint.Win.Chart.PieSeries = CType(chart.Model.PlotAreas(0).Series(0), FarPoint.Win.Chart.PieSeries)
series.LabelVisible = True
series.LabelContainsCategoryName = True
series.LabelContainsValue = True
```

You can also add percentage labels in the pie chart by using **LabelContainsPercentage** property of the **PieSeries** class. It accepts boolean value and is false by default.

```csharp
// Enable Percentage label in pie chart
series.LabelContainsPercentage = true;
```

```vbnet
// Enable Percentage label in pie chart
series.LabelContainsPercentage = true;
```

![](https://cdn.mescius.io/document-site-files/images/2238e618-a1fb-45a6-9ce5-9a4157bd2931/images/plottypes-pie-percentagelabel.png)

## Using the Chart designer

Pie charts can be created in the Chart Designer using the following steps -

1. Run **Chart Designer**.
2. Select the target **Chart Model** from the tree menu on the left.
3. Open the **Plot Area Collection Editor** from PlotAreas in the **Other** section of the property list on the right.
4. Click the drop-down button to the right of the **Add** button.
5. Select and add the **PiePlotArea** and set each property as required.

You can also enable percentage labels in the Chart Designer by selecting the Pie Series target from the tree menu on the left and enable the **LabelContainsPercentage** option to True on the property list.
![](https://cdn.mescius.io/document-site-files/images/2238e618-a1fb-45a6-9ce5-9a4157bd2931/images/plottypes-pie-chartdesigner.png)

> !type=note
> **Note:** For information on starting [Chart Designer](/spreadnet/docs/latest/online-win/overview/spwin-designerguide), refer to Chart Designer in the [SPREAD Designer Guide](/spreadnet/docs/latest/online-win/overview/spwin-designerguide/fpchart-chartdesigner).