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:
<apex: legend font="13px Helvetica"></apex: legend>
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:
<apex: legend id="legendId"></apex: legend>
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:
<apex: legend padding="2px"></apex: legend>
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:
<apex: legend position="right"></apex: legend>
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:
AD
<apex: legend rendered="true"></apex: legend>
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:
<apex: legend spacing="5px"></apex: legend>
Let's take an example to understand how we can use this component on the VF page:
ApexLegendExample.vfp
AD
<!--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;
}
}
}
