Understanding apex:areaSeries Component in Visualforce

The <apex:areaSeries> component is used within a <apex:chart> component to render area charts—a type of chart that shows quantitative data using filled areas beneath lines, useful for tracking changes over time.

Syntax

xmlCopyEdit<apex:chart data="{!dataList}" width="600" height="400">
    <apex:axis type="Numeric" position="left" title="Value"/>
    <apex:axis type="Category" position="bottom" fields="month" title="Month"/>
    <apex:areaSeries xField="month" yField="value" fill="true"/>
</apex:chart>

Key Attributes

Example: Display Monthly Sales with Area Chart

Apex Controller:

apexCopyEditpublic class ChartController {
    public List<DataPoint> getDataList() {
        return new List<DataPoint>{
            new DataPoint('Jan', 200),
            new DataPoint('Feb', 250),
            new DataPoint('Mar', 300)
        };
    }

    public class DataPoint {
        public String month { get; set; }
        public Integer value { get; set; }

        public DataPoint(String month, Integer value) {
            this.month = month;
            this.value = value;
        }
    }
}

Visualforce Page:

xmlCopyEdit<apex:page controller="ChartController">
    <apex:chart data="{!dataList}" width="600" height="400">
        <apex:axis type="Category" position="bottom" fields="month" title="Month"/>
        <apex:axis type="Numeric" position="left" title="Sales"/>
        <apex:areaSeries xField="month" yField="value" fill="true" title="Monthly Sales"/>
    </apex:chart>
</apex:page>

When to Use <apex:areaSeries>

• To visualize trends or volume changes over time.
• Ideal for cumulative values where area representation makes insights more intuitive.

Best Practices

• Combine with meaningful axis labels for clarity.
• Use fill="true" for filled area or leave blank for just lines.
• Use consistent colors if multiple series are used together.