<apex: chartTips> Component in Visualforce Page

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:

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. 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:

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:

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:

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:

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.

Syntax:

8. width

The width is an integer-type attribute used to specify the width of the tooltip in pixels.

Syntax:

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 ;
        }
    }    
}

Output