<apex: areaSeries> Component in Visualforce Page

It is one of the most important components that is used for defining the data series that needs to be rendered as a shaded area in a VF chart. The <apex:areaSeries> component is similar to the <apex:lineSeries> component with the fill attribute set to true.

The <apex:areaSeries> component has the following attributes:

1. axis

The axis attribute is of type String that is used to define the axis by which the chart series should bind to. Left, right, top and bottom are the possible values for it.

The bound axis should be defined by a sibling component, i.e., <apex:axis> component.

Syntax:

2. colorSet

It is of type String that is used for defining the set of color values. We specify the colors as the hexadecimal color that should be comma separated.

Syntax:

3. highlight

It is of type Boolean that is used for specifying whether each level should be highlighted or not when the mouse pointer passes over it. By default, its value is set to true.

Syntax:

4. hightlightLineWidth

It is of type Integer that is used for specifying the width(pixels) of the line that surrounds a level when it's highlighted.

Syntax:

5. highlightOpacity

It is of type String that is used for specifying the decimal number between 0 and 1. The decimal number represents the opacity of the color overlay on a level when it's highlighted.

Syntax:

6. highlightStrokeColor

It is of type String that is used for specifying the color(hex code) of the line that surrounds a level when it's highlighted.

Syntax:

7. id

The id attribute is of type string that allows the chart component to be referenced by other components on the page.

Syntax:

8. opacity

It is of type string that is used for specifying the decimal number between 0 and 1. The decimal number represents the opacity of the filled area for this level of series.

Syntax:

9. rendered

It is of type Boolean that is used for specifying whether the char series is rendered in the chart or not. By default, its value is set to true.

Syntax:

10. rendererFn

It is of type string that is used for specifying the name of the JavaScript function. The specified function overrides how each data point is rendered.

Syntax:

11. showInLegend

It is of type Boolean that is used for specifying whether this chart needs to be added to the chart legend or not. By default, its value is set to true.

Syntax:

12. tips

We use this attribute when we need to display a tooltip for each data point marker when the mouse pointer passes over it. This attribute is of type Boolean, and by default, its value is set to true.

Syntax:

13. title

It is of type string that is used for defining the title of this chart series that need to be displayed in the chart legend.

Syntax:

14. xField

The field in each record is provided in the chart data from which to retrieve the x-axis value for each data point in the series. This field must exist in every record in the chart data.

Syntax:

15. yField

The field in each record is provided in the chart data from which to retrieve the x-axis value for each data point in the series. This field must exist in every record in the chart data.

Syntax:

Let's take an example to understand how we can use the areaSeries component in VF:

ApexAreaSeriesExample.vfp

<!--Apex Page with standard and custom controller-->
<apex:page standardController="Campaign" extensions="ApexAreaSeriesController">
    <!-- use pageBlock, pageBlockSection, and pageBlockSectionItem to design chart in VF-->
    <apex:pageBlock >
        <!-- pageBlockSection that display the chart for Area-->
        <apex:pageBlockSection title="Area">
            <apex:pageBlockSectionItem >
                <!-- use apex:chart component with legend, axis, charLabel and areaSeries-->
                <apex:chart height="400" width="700" animate="true" legend="true" data="{!data}" name="Area Chart" theme="Category3">
                    <apex:legend position="right"/>
                    <apex:axis type="Numeric" position="right" fields="record1,record2,record3" title="Closed Won" grid="true">
                        <apex:chartLabel />
                    </apex:axis>
                    <apex:axis type="Category" position="bottom" fields="name" title="Month">
                        <apex:chartLabel rotate="300"/>
                    </apex:axis>
                    <apex:areaSeries axis="right" xField="name" yField="record1,record2,record3" tips="true" />
                </apex:chart>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
        <!-- pageBlockSection to display Pie chart-->
        <apex:pageBlockSection title="Pie Chart Example">
            <apex:pageBlockSectionItem>
                <!-- use apex:chart component with legend and pieSeries-->
                <apex:chart height="400" width="400" data="{!pieData}">
                    <apex:pieSeries dataField="record" labelField="name"/>
                    <apex:legend position="left"/>
                </apex:chart>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

ApexAreaSeriesController.apxc

// create class ApexAreaSeriesController for constructing chart data
public with sharing class ApexAreaSeriesController {
    // declare a campaign to access it on the VF page
    public Campaign campRec {get;set;}
    
    // default constructor with StandardController
    public ApexAreaSeriesController(ApexPages.StandardController std){
        campRec = (Campaign)std.getRecord();
    }
    
    // create getPieData() method 
    public List<PieChartDataWrapper> getPieData() {
        // create a list of PieChartDataWrapper
        List<PieChartDataWrapper> info = new List<PieChartDataWrapper>();
        
        // get the aggregate result of month and revenue
        List<AggregateResult> opps = [SELECT SUM(Amount) revenue, CALENDAR_MONTH(CloseDate) theMonth
                                      FROM Opportunity WHERE CampaignId =: campRec.id GROUP BY CALENDAR_MONTH(CloseDate)];
        
        // iterate aggregate result of opportunity
        for(AggregateResult agg : opps){
            Integer revenue = Integer.valueOf(agg.get('revenue'));// typecast outcome into Integer
            String month = String.valueOf(agg.get('theMonth')); // typecast outcome into String
            info.add(new PieChartDataWrapper(month, revenue));
        }
        return info;
    }
    
    // create getData() method 
    public List<DataWrapper> getData(){
        // create a list of DataWrapper
        List<DataWrapper> data = new List<DataWrapper>();
        
        // add data to the list
        data.add(new DataWrapper('January', 35, 85, 50));
        data.add(new DataWrapper('February, 39, 10, 60));
        data.add(new DataWrapper('March', 20, 27, 70));
        data.add(new DataWrapper('April', 69, 22, 80));
        data.add(new DataWrapper('May', 60, 46, 90));
        data.add(new DataWrapper('June', 28, 40, 94));
        data.add(new DataWrapper('July', 87, 77, 25));
        data.add(new DataWrapper('August', 82, 68, 40));
        data.add(new DataWrapper('September', 29, 60, 50));
        data.add(new DataWrapper('October', 73, 61, 51));
        data.add(new DataWrapper('November', 75, 62, 48));
        data.add(new DataWrapper('December', 12, 65, 65));
        
        return data;
    }
    
    // create DataWrapper class to form data
    public class DataWrapper {
        public String name { get; set; }
        public Integer record1 { get; set; }
        public Integer record2 { get; set; }
        public Integer record3 { get; set; }
        
        // parameterized constructor
        public DataWrapper(String name, Integer record1, Integer record2, Integer record3) {
            this.name = name;
            this.record1 = record1;
            this.record2 = record2;
            this.record3 = record3;
        }
    }
    
    // create PieChartDataWrapper to form data for Pie chart
    public class PieChartDataWrapper {
        public String name { get; set; }
        public Integer record { get; set; }
        
        // parameterized constructor
        public PieChartDataWrapper(String name, Integer record) {
            this.name = name;
            this.record = record;
        }
    }
}

Output