Apex Code Development You need to sign in to do that
Don't have an account?
Visualforce Pie Chart With Labels That Are Different Than the Legend
Is it possible to create a pie chart in VF with slice labels that are different from the legend? In this chart I would like the labels to be the actual numbers and the legend to be text. A pie wedge would have a label of 4% but the legend would say "Percent Opened" for example.
Here is the page
Here is the controller
Here is the page
<apex:page controller="CampaignPieChartController" title="Campaign Metrics" lightningStylesheets="true">
<div class="slds-align_absolute-center">
<apex:chart height="300" width="300" data="{!pieData}" resizable="true">
<apex:legend position="right" font="14px Helvetica"/>
<apex:pieSeries dataField="data" labelField="name"
colorSet="#008CC3,#F0B428,#B42846" donut="60">
<apex:chartLabel display="middle" font="bold 14px Helvetica" orientation="vertical"/>
</apex:pieSeries>
</apex:chart>
</div>
</apex:page>
Here is the controller
public without sharing class CampaignPieChartController {
Id recId = ApexPages.currentPage().getParameters().get('Id');
public List<PieWedgeData> getPieData()
{
List<PieWedgeData> data = new List<PieWedgeData>();
List<Campaign> campaigns = new List<Campaign>();
String sql = 'SELECT Emails_Delivered__c, Total_Opens__c, Total_Clicks__c FROM Campaign WHERE Campaign.Id =: recId';
campaigns = Database.Query(sql);
for(Campaign temp :campaigns)
{
data.add(new PieWedgeData('Delivered', temp.Emails_Delivered__c));
data.add(new PieWedgeData('Opens', temp.Total_Opens__c));
data.add(new PieWedgeData('Clicks', temp.Total_Clicks__c));
}
return data;
}
// Wrapper class
public class PieWedgeData
{
public String name { get; set; }
public Decimal data { get; set; }
public PieWedgeData(String name, Decimal data)
{
this.name = name;
this.data = data;
}
}
}
You probably need something like <apex:chartTips>
apex:chartTips Defines tooltips which appear on mouseover of data series elements. This component offers more configuration options than the default tooltips displayed by setting the tips attribute of a data series component to true.
Note: This component must be enclosed by a data series component.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_chartTips.htm
but the sample of the documentation is too simple (doesn't use labelField nor valueField).