> Markdown version of [Pie](https://vaadin.com/docs/next/components/charts/charttypes/pie). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.pie"></a>Pie Charts

A pie chart illustrates data values as sectors whose size is proportional to the sum of all the values. A pie chart is enabled with `ChartType.PIE`. You can make type-specific settings in the `PlotOptionsPie` object, as described later.

```java
Chart chart = new Chart(ChartType.PIE);
Configuration conf = chart.getConfiguration();
...
```

[Pie Chart](#figure.charts.charttypes.pie) shows a configured pie chart.

[Image: charts pie]

Pie Chart

## <a id="charts.charttypes.pie.plotoptions"></a>Plot Options

The chart-specific options of a pie chart are configured with a `PlotOptionsPie`.

```java
PlotOptionsPie options = new PlotOptionsPie();
options.setInnerSize("0");
options.setSize("75%");  // Default
options.setCenter("50%", "50%"); // Default
conf.setPlotOptions(options);
```

- `innerSize`

  A pie with an inner size greater than zero is a "doughnut". The inner size can be expressed either as pixels or as a relative percentage of the chart area with a string (such as "60%"). See the later section on doughnuts.

- `size`

  The size of the pie can be expressed either as pixels or a relative percentage of the chart area with a string (such as "80%"). The default size is 75%, to leave space for the labels.

- `center`

  The X and Y coordinates of the center of the pie can be expressed as either numbers of pixels or a relative percentage of the chart sizes with a string. The default is "50%", "50%".

## <a id="charts.charttypes.pie.data"></a>Data Model

The labels for the pie sectors are determined from the labels of the data points. `DataSeries` or `ContainerSeries`, which allow the data points to be labeled, should be used for pie charts.

```java
DataSeries series = new DataSeries();
series.add(new DataSeriesItem("Mercury", 4900));
series.add(new DataSeriesItem("Venus", 12100));
...
conf.addSeries(series);
```

If a data point, as defined as a `DataSeriesItem` in a `DataSeries`, has the *sliced* property enabled, it’s shown as slightly cut away from the pie.

```java
// Slice one sector out
DataSeriesItem earth = new DataSeriesItem("Earth", 12800);
earth.setSliced(true);
series.add(earth);
```

## <a id="pie-example"></a>Pie Example

**Flow** — `ChartTypePie.java`

```java
Chart chart = new Chart(ChartType.PIE);

Configuration conf = chart.getConfiguration();

conf.setTitle("Browser market shares in January, 2018");

Tooltip tooltip = new Tooltip();
tooltip.setValueDecimals(1);
conf.setTooltip(tooltip);

PlotOptionsPie plotOptions = new PlotOptionsPie();
plotOptions.setAllowPointSelect(true);
plotOptions.setCursor(Cursor.POINTER);
plotOptions.setShowInLegend(true);
conf.setPlotOptions(plotOptions);

DataSeries series = new DataSeries();
DataSeriesItem chrome = new DataSeriesItem("Chrome", 61.41);
chrome.setSliced(true);
chrome.setSelected(true);
series.add(chrome);
series.add(new DataSeriesItem("Internet Explorer", 11.84));
series.add(new DataSeriesItem("Firefox", 10.85));
series.add(new DataSeriesItem("Edge", 4.67));
series.add(new DataSeriesItem("Safari", 4.18));
series.add(new DataSeriesItem("Sogou Explorer", 1.64));
series.add(new DataSeriesItem("Opera", 6.2));
series.add(new DataSeriesItem("QQ", 1.2));
series.add(new DataSeriesItem("Others", 2.61));
conf.setSeries(series);
chart.setVisibilityTogglingDisabled(true);
```

## <a id="charts.charttypes.pie.donut"></a>Doughnut Charts

Setting the `innerSize` of the plot options of a pie chart to a value larger than zero results in an empty hole at the center of the pie.

```java
PlotOptionsPie options = new PlotOptionsPie();
options.setInnerSize("60%");
conf.setPlotOptions(options);
```

Because you can also set the plot options for each data series, you can put two pie charts on top of each other, with the smaller one fitted in the "hole" of the doughnut. This way, you can make pie charts with more details on the outer rim, as shown in the following example:

```java
// The inner pie
DataSeries innerSeries = new DataSeries();
innerSeries.setName("Browsers");
PlotOptionsPie innerPieOptions = new PlotOptionsPie();
innerPieOptions.setSize("60%");
innerSeries.setPlotOptions(innerPieOptions);
...

DataSeries outerSeries = new DataSeries();
outerSeries.setName("Versions");
PlotOptionsPie outerSeriesOptions = new PlotOptionsPie();
outerSeriesOptions.setInnerSize("60%");
outerSeries.setPlotOptions(outerSeriesOptions);
...
```

The result is illustrated in [Overlaid Pie and Doughnut Chart](#figure.charts.charttypes.pie.donut).

[Image: charts donut]

Overlaid Pie and Doughnut Chart