The <apex: axis> is a component used as a child component for <apex: chart> to specify the axis in which the chart should be designed. We can define one <apex: axis> for each chart edge. So, we can specify up to 4 <apex: axis> for a single <apex: chart> component.
Using the <apex: axis> component, we can set the units, scale, labeling, and other visual options for the axis.
The <apex: axis> component has the following attributes on the Visualforce Page:
1. dashSize
The dashSize is an Integer-type attribute used for specifying the size of the dash marker. This attribute accepts value in pixels, and if we don't specify its value, three is set as a default value to it.
Syntax:
<apex: axis dashSize="4"></apex: axis>
2. fields
The "fields" is a string-type attribute that specifies field(s) in each record of the chart data from which to retrieve axis label values. We can specify more than one field for increasing the axis scale range to include all values.
Syntax:
<apex: axis fields="controller data"></apex: axis>
3. grid
The grid is a Boolean-type attribute used for specifying whether to draw gridlines in the chart's background. Boolean-value false is set as a default value for this attribute.
Syntax:
<apex: axis grid="true"></apex: axis>
4. gridFill
The gridFill is a Boolean-type attribute used for specifying whether to fill in alternative grid intervals with a background color. Boolean-value false is set as a default value for this attribute.
Syntax:
<apex: axis gridFill="true"></apex: axis>
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.
AD
Syntax:
<apex: axis id="axisId"></apex: axis>
6. margin
The margin is an integer-type attribute used to specify the distance between the chart's outer edge and the baseline of the axis label text. By default, its value is set to 10 for this attribute.
Syntax:
<apex: axis margin="11"></apex: axis>
7. maximum
AD
The maximum is an integer-type attribute used to specify the maximum value for the axis. By default, its value is calculated from the values in fields.
Syntax:
<apex: axis maximum="5"></apex: axis>
8. minimum
The minimum is an integer-type attribute used to specify the minimum value for the axis. By default, its value is calculated from the values in fields.
Syntax:
<apex: axis minimum="5"></apex: axis>
9. position
The position is a string-type attribute that specifies the edge of the chart to which to bind the axis. These are the possible values for this attribute:
left
right
top
bottom
gauge
radial
Syntax:
<apex: axis minimum="5"></apex: axis>
10. rendered
The rendered is a Boolean-type attribute used for specifying whether the axis elements are rendered with the chart. Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: axis rendered="false"></apex: axis>
11. tips
The "tips" is an integer-type attribute used to specify the number of tick marks placed on the axis. The tips attribute valid only when the axis type is Numeric.
Syntax:
<apex: axis tips="2"></apex: axis>
12. title
The title is a string-type attribute used to specify the axis's label.
Syntax:
<apex: axis title="Axis Title"></apex: axis>
13. type
The type is a string-type attribute used to specify the axis type used to calculate axis intervals and spacing. These are the possible values for this attribute:
Category
Numeric
Gauge
Radial
Syntax:
<apex: axis type="numeric"></apex: axis>
Let's take an example to understand how we can use the <apex: axis> component on the Visualforce page.
ApexAxisExample.vfp
<!-- apex page to represent the use of apex: axis component -->
<apex:page controller="ApexAxisController" 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:axis type="Category" position="bottom" fields="attribute" title="LimitAttribute"/>
<apex:barSeries orientation="vertical" axis="left" xField="attribute" yField="apiRequestLimit"/>
</apex: chart>
</apex: page>
ApexAxisController.apxc
//create class ApexAxisController to construct data for the chart
public class ApexAxisController {
//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 ;
}
}
}
