<apex: messages> Component in Visualforce Page

The <apex: legend> is another important component for defining the chart legend. It provides additional configuration options beyond the defaults used by the legend attribute of the <apex: chart> component. The <apex: legend> component is used within the <apex: chart>.

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

1. font

The font is a string-type attribute used for specifying the font for the legend text. The value of this attribute is specified as a CSS-style font definition.

Syntax:

2. id

The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.

Syntax:

3. padding

The padding is an integer-type attribute that defines the amount of spacing between the content and the legend's border. We specify the value in pixels for this attribute.

Syntax:

4. position

The position is a string-type attribute used for specifying the legend's position in relation to the chart. These are the possible values for this attribute:

top
bottom
right
left

Syntax:

5. rendered

The rendered is a Boolean-type attribute used to specify whether this component is rendered with the chart. The boolean value true is set as a default value for this attribute.

Syntax:

spacing

The spacing is an integer-type attribute used to specify the amount of spacing between legend items. The value of this attribute is specified in pixels.

Syntax:

Let's take an example to understand how we can use this component on the VF page:

ApexLegendExample.vfp

<!--apex page to -->  
<apex:page standardController="Campaign" extensions="ApexLegendController">  
    <!-- use pageBlock, pageBlockSection, and pageBlockSectionItem to design chart in VF-->  
    <apex:pageBlock >  
        <!-- pageBlockSection to display Pie chart-->  
        <apex:pageBlockSection title="Campaign Data">  
            <apex:pageBlockSectionItem >  
                <!-- use apex: chart component with legend and pieSeries-->  
                <apex:chart height="300" width="300" data="{!pieData}">  
                    <apex:pieSeries dataField="value" labelField="monthName"/>  
                    <apex:legend position="left"/>  
                </apex: chart>  
            </apex:pageBlockSectionItem>  
        </apex:pageBlockSection>  
    </apex:pageBlock>  
</apex: page>

ApexLegendController.vfp

// create class ApexLegendController for constructing chart data  
public with sharing class ApexLegendController {  
    // declare a campaign to access it on the VF page  
    public Campaign data {get;set;}  
    
    // default constructor with StandardController  
    public ApexLegendController(ApexPages.StandardController stdController){  
        data = (Campaign)stdController.getRecord();  
    }  
    
    // create getPieData() method
    public List<WrapData> getPieData() {   
        // create a list of wrapData  
        List<wrapData> info = new List<wrapData>();  
        
        // get the aggregate result of the month and revenue  
        List<AggregateResult> opps = [SELECT SUM(Amount) revenue, CALENDAR_MONTH(CloseDate) theMonth  
                                      FROM Opportunity WHERE CampaignId =: data.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 wrapData(month, revenue));  
        }  
        return info;  
    }  
    
    // create wrapData to form data for Pie chart  
    public class wrapData {  
        public String monthName { get; set; }  
        public Integer value { get; set; }  
        
        // parameterized constructor  
        public wrapData(String monthName, Integer value) {  
            this.monthName = monthName;  
            this.value = value;  
        }  
    }  
}

Output