<apex: chartLabel> Component in Visualforce Page

The <apex: chartLabel> is another important component to define how labels are displayed. The <apex: chartLabel> component allows us to affect the display of labels(data series, axes, and pie chart segment). The <apex: chartLable> component is always used as a child component of any data series component or an <apex: axis> component.

The <apex: chartLabel> component has the following attributes on the Visualforce page:

1. color

The color is a string-type attribute used to specify the text's color. We specify its value as an HTML-style color(hexadecimal). By default, #000 is set as a default color.

Syntax:

2. display

The display is a string-type attribute used for specifying the position of labels. These are the possible values for this attribute:

rotate
middle
insideStart
insideEnd
none
under
over
outside

The middle is set as a default value for this attribute.

Syntax:

3. field

The field is a string-type attribute used for specifying the field from which the label of the data point in the series is retrieved. The "name" is set as a default value for this attribute.

Syntax:

4. font

The font is a string-type attribute used to specify the font(as a CSS rule) for the label text. By default, its value is set to "11px Helvetica, sans-serif"

Syntax:

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

6. minMargin

The minMargin is an integer-type attribute used for specifying the minimum distance from a label to the origin of the visualization in pixels. By default, its value is set to 50.

Syntax:

7. orientation

The orientation is a string-type attribute used for displaying the label text characters normally or stacked vertically. These are the two possible values for this attribute:

horizontal
vertical

By default, its value is set to "horizontal".

Syntax:

8. rendered

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

Syntax:

9. rendererFn

The rendererFn is a string-type attribute used for specifying the name of the JavaScript function that augments or overrides label rendering for axis or series labels.

Syntax:

10. rotate

The rotate is an integer-type attribute that specifies the degree to rotate the label text. By default, its value is set to 0.

Syntax:

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

ApexChartLabelExample.vfp

<!-- apex page to represent the use of apex: chartLabel component -->
<apex:page controller="ApexChartLabelController" 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" >
            <!-- use apex: chartLabel to rotate label at 315 degrees -->
            <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: chart>
</apex: page>

ApexChartLabelController.apxc

//create class ApexChartLabelController to construct data for the chart
public class ApexChartLabelController {
    //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