<apex: chart> Component in Visualforce Page

The <apex: chart> component is another important component used to define the chart's general characteristics (size, data binding, etc.).

The <apex: chart> component has the following attributes:

1. animate

The animate is a Boolean-type attribute used for specifying whether to animate the chart when it is first rendered. The Boolean-value true is set as a default value.

Syntax:

2. background

The background is a string-type attribute used to specify the chart's background color. The value of this attribute is specified as an HTML-style color. By default, the chart's background color is set as white.

Syntax:

3. colorSet

The colorSet is a string-type attribute used for specifying a set of the color values used by each child's series. The value for this attribute is specified as a comma-separated HTML-style colors string.

Syntax:

4. data

The data is an Object-type attribute used for specifying the data binding for the chart. The controller method, JavaScript method, or JavaScript object is specified as a value. In all cases, the result must be an array of records, and every record must contain all fields referenced in child data series components.

Syntax:

5. floating

The floating is a Boolean-type attribute used for specifying whether to float the chart outside the regular HTML document flow using CSS absolute positioning.

Syntax:

6. height

The height is a string-type attribute used to specify the chart rectangle's height.

Syntax:

7. hidden

The hidden is a Boolean-type attribute used for specifying whether to show or hide the chart initially. When it is set to true, the chart renders but hides it when the page is first displayed.

Syntax:

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

9. legend

The legend is a Boolean-type attribute used for specifying whether to display the default chart legend. The Boolean value true is set as a default value.

Syntax:

10. name

The name is a string-type attribute used for specifying the name of the generated JavaScript object used to provide additional configuration or perform dynamic operations.

Syntax:

11. rendered

The rendered is a Boolean-type attribute used to specify whether the component is rendered on the page. The Boolean value true is set as a default value to this attribute.

Syntax:

12. renderTo

The renderTo is a string-type attribute used to specify the Id of the DOM element to render the chart.

Syntax:

13. resizable

The resizable is a Boolean-type attribute used for specifying whether the chart is resizable after rendering

Syntax:

14. theme

The theme is a string-type attribute used to specify the chart theme's name. These are the possible values for this attribute:

Salesforce
Green
Purple
Sky
Blue
Red
Yellow
Category1
Category2
Category3
Category4
Category5
Category6

Syntax:

15. width

The width is a string-type attribute used for specifying the width of the chart rectangle in pixels.

Syntax:

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

ApexChartExample.vfp

<!-- apex page to represent the use of apex: chart component -->
<apex:page controller="ApexChartController" title="Pie Chart">
    <!-- page block to create pie chart using <apex: chart> component-->
    <apex: pageblock title="Org Information">
        <apex:chart height="250" width="350" data="{!orgInformation}">
            <apex:pieSeries tips="true" dataField="apiRequestLimit" labelField="attribute"/>
            <apex:legend position="bottom"/>
        </apex: chart>
    </apex:pageblock>
</apex: page>

ApexChartController.apxc

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