Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Live Controller (Pilot)
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Visualforce Charting Limitations and Considerations
How Visualforce Charting Works
Building a Complex Chart with Visualforce Charting
Updating Charts with Refreshed Data
Controlling the Appearance of Charts
Chart Colors
Chart Layout and Annotation
Bar Charts
Other Linear Series Charts
Pie Charts
Gauge Charts
Radar Charts
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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 
1<apex:chart data="{!pieData}" height="400" width="500" background="#F5F5F5">
2    <apex:legend position="left"/>
3    <apex:pieSeries labelField="name" dataField="data1" donut="50">
4        <apex:chartLabel display="middle" orientation="vertical" 
5            font="bold 18px Helvetica"/>
6    </apex:pieSeries>
7</apex:chart>