---
schema_version: "1"
id: b4d257c871ceeff3c206ea0816887098e50baee29d803d8f62d9114a52a4442b
title: A Simple Charting Example
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-overview-simple-example.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview-simple-example.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 41a2f1fb7049f2b6e9ef08e3ff9a88aaf9eaaa28b24c6f5ce4d0b9de4749fb7d
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# A Simple Charting Example

A Visualforce chart requires that you create a chart container component, which encloses at least one data series component. You can optionally add additional series components, chart axes, as well as labeling components such as a legend, chart labels, and tooltips for data points.

Here is a simple pie chart and the markup that creates it:

![A simple pie chart](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_charting_simple_pie_chart.png)

<!-- otherprops: set_clipboard -->
```apex_page
<apex:page controller="PieChartController" title="Pie Chart">
    <apex:chart height="350" width="450" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name"/>
        <apex:legend position="right"/>
    </apex:chart>
</apex:page>
```

The `<apex:chart>` component defines the chart container, and binds the component to the data source, the `getPieData()` controller method. The `<apex:pieSeries>` describes the label and data fields to access in the returned data, to label and size each data point.

Here’s the associated controller:

<!-- otherprops: set_clipboard -->
```apex_code
public class PieChartController {
    public List<PieWedgeData> getPieData() {
        List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Jan', 30));
        data.add(new PieWedgeData('Feb', 15));
        data.add(new PieWedgeData('Mar', 10));
        data.add(new PieWedgeData('Apr', 20));
        data.add(new PieWedgeData('May', 20));
        data.add(new PieWedgeData('Jun', 5));
        return data;
    }

    // Wrapper class
    public class PieWedgeData {

        public String name { get; set; }
        public Integer data { get; set; }

        public PieWedgeData(String name, Integer data) {
            this.name = name;
            this.data = data;
        }
    }
}
```

This controller is deliberately simple; you normally issue one or more SOQL queries to collect your data.

These are the important points illustrated by the example:

-   The `getPieData()` method returns a List of simple objects, an inner class PieWedgeData used as a wrapper. Each element in the list is used to create a data point.
-   The PieWedgeData class is just a set of properties, and is essentially used as a `name`=_value_ store.
-   The chart series component `<apex:pieSeries>` defines which properties from the PieWedgeData class to use to determine each point in the series. In this simple example there’s no mystery, but in charts with multiple series and axes this convention allows the efficient return of the entire data set in one List object.