---
schema_version: "1"
id: 28db3fbd47cd654fffb3cef789194040613b31125e65a755ac522dd51f4b376c
title: Pie Charts
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/charting/pages-charting-appearance-pie-charts.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-pie-charts.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: cd845d4caf9b02078266e1f9717d7d8f5f161b3def70599ae4f59f3a472c6f01
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Pie Charts

The most common customizations to `<apex:pieSeries>` charts is to colors and labels. Use the `colorSet` attribute and the `<apex:chartLabel>` component that were demonstrated in previous examples.

To create a ring chart instead of a pie chart, set the `donut` attribute. The `donut` attribute is an integer between 0 and 100 and represents the percentage of the radius of the hole. Here’s a simple ring chart:

![Ring Chart](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_charting_ring_chart.png)

```visualforce
<apex:chart data="{!pieData}" height="400" width="500" background="#F5F5F5">
    <apex:legend position="left"/>
    <apex:pieSeries labelField="name" dataField="data1" donut="50">
        <apex:chartLabel display="middle" orientation="vertical" 
            font="bold 18px Helvetica"/>
    </apex:pieSeries>
</apex:chart>
```

**See Also**  


-   [Chart Colors](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-colors.md)
-   [Chart Layout and Annotation](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-layout.md)