apex:areaSeries Component

The apex:areaSeries component is a Visualforce charting component that can be used to create area charts in Salesforce. An area chart is similar to a line chart in that it displays trends over time, but the area between the line and the x-axis is also filled with color to emphasize the data.

Syntax

The syntax for the apex:areaSeries component is as follows:

<apex:chart>
    <apex:axis type="{category|numeric|time}" ... />
    <apex:series>
        <apex:areaSeries
            axis="{primary|secondary}" 
            xField="..." 
            yField="..."
            displayName="..."
            fill="..."
            highlight="..."
        />
    </apex:series>
</apex:chart>

Example

Consider the following example that shows a simple area chart for the sales data over a period of 10 years:

<apex:chart height="300" width="500" data="{!salesData}">
    <apex:axis type="category" position="bottom" fields="year">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:axis type="numeric" position="left" title="Sales">
        <apex:chartLabel />
    </apex:axis>
    <apex:series>
        <apex:areaSeries xField="year" yField="sales" highlight="true">
            <apex:chartTips height="32" width="120" />
        </apex:areaSeries>
    </apex:series>
</apex:chart>  

Output

The above code will display an area chart that shows the sales data over a period of 10 years, as shown below:

Explanation

In the above example, apex:chart is used to define the chart, and apex:axis is used to define the x-axis and y-axis labels. The apex:areaSeries component is used to define the data series, and the xField and yField attributes are used to specify the fields to be used as x-axis and y-axis respectively. The highlight attribute is used to specify whether the series should be highlighted when hovered over by the user.

Use

The apex:areaSeries component can be used to create area charts in Visualforce pages in Salesforce. It is useful when you want to display trends over time, and want to emphasize the data using color fill.

Important Points

• The fill attribute of the apex:areaSeries component can be used to specify the color with which to fill the area between the line and the x-axis.
• The displayName attribute can be used to specify the name of the data series.
• The highlight attribute can be set to "true" or "false" to enable or disable series highlights when hovered over by the user.

Summary

The apex:areaSeries component is a Visualforce charting component that is used to create area charts in Salesforce. It is useful when you want to display trends over time, and want to emphasize the data using color fill. The xField and yField attributes are used to specify the fields to be used as x-axis and y-axis respectively, and the highlight attribute is used to specify whether the series should be highlighted on hover.