The <apex: chartTips> is another important component to define the tooltips which appear on the mouseover of data series elements. The "tips" attribute of the data series component is also used to display the tooltip. The <apex: chartTips> component offers more configuration options to display tooltips. The <apex: chartTips> component is always used as a child component of the data series component.
The <apex: chartTips> component has the following attributes on the Visualforce page:
1. height
The height is an integer-type attribute used to specify the height of the tooltip in pixels.
Syntax:
<apex: chartTips height="20"></apex: chartTips>
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: chartTips id="chartTipsId"></apex: chartTips>
3. labelField
The labelField is a string-type attribute used for specifying the field from which the label of the data point in the series is retrieved to use it as a label for the tooltip. The "labelField" is the default value for the pie and gauge series.
Syntax:
<apex: chartTips id="fieldName"></apex: chartTips>
4. rendered
The rendered is a Boolean-type attribute used to specify whether the data series tooltips are rendered with the chart. The Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: chartTips rendered="false"></apex: chartTips>
5. rendererFn
The rendererFn is a string-type attribute used for specifying the name of the JavaScript function that augments or overrides tooltip rendering for chart tips.
Syntax:
AD
<apex: chartTips rendererFn="funcName"></apex: chartTips>
6. trackMouse
The trackMouse is a Boolean-type attribute that specifies whether the chart tips should follow the mouse pointer. The Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: chartTips trackMouse="false"></apex: chartTips>
7. valueField
The valueField is a string-type attribute used for specifying the field's name in each chart data record to use as the value for the tooltip for each data point in the series. The dataField is used as the default value for the pie and gauge series.
AD
Syntax:
<apex: chartTips valueField="fieldName"></apex: chartTips>
8. width
The width is an integer-type attribute used to specify the width of the tooltip in pixels.
Syntax:
<apex: chartTips width="50"></apex: chartTips>
Let's take an example to understand how we can use this component on the Visualforce page:
ApexChartTipsExample.vfp
<!-- apex page to represent the use of apex: chartTips component -->
<apex:page controller="ApexChartTipsController" title="Bar Chart">
<!-- create a chart using <apex: chart> component-->
<apex:chart data="{!OrgInformation}" height="500" width="600">
<apex:legend position="top"/>
<!-- use <apex: axis> component to specify axis for left and bottom position-->
<apex:axis type="Numeric" position="left" fields="apiRequestLimit" title="Limit" >
<apex:chartLabel rotate="315"/>
</apex: axis>
<apex:axis type="Category" position="bottom" fields="attribute" title="LimitAttribute">
<apex:chartLabel rotate="315"/>
</apex: axis>
<apex:barSeries orientation="vertical" axis="left" xField="attribute" yField="apiRequestLimit">
<apex: chartTips height="20" width="120"/>
</apex:barSeries>
</apex: chart>
</apex: page>
ApexChartTipsController.apex
//create class ApexChartTipsController to construct data for the chart
public class ApexChartTipsController {
//create
public List<ChartInfo> getOrgInformation() {
// create a list of ChartInfo
List<ChartInfo> records = new List<ChartInfo>();
// create a map that stores org information
Map<String,System.OrgLimit> limitsMap = OrgLimits.getMap();
if(limitsMap.containsKey('DailyApiRequests')){
System.OrgLimit apiRequestsLimit = limitsMap.get('DailyApiRequests');
Integer value1 = apiRequestsLimit.getValue();
Integer value2 = apiRequestsLimit.getLimit();
records.add(new ChartInfo('Max/Remaining', value2));
records.add(new ChartInfo('Remaining', value2-value1));
records.add(new ChartInfo('Used', value1));
return records;
}
return null;
}
// create wrapper class for chart
public class ChartInfo {
public String attribute {get;set;}
public Integer apiRequestLimit {get;set;}
// constructor
public ChartInfo(String attribute, Integer requestLimit) {
this.attribute = attribute ;
this.apiRequestLimit = requestLimit ;
}
}
}
