Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Visualforce Charting Limitations and Considerations
How Visualforce Charting Works
Building a Complex Chart with Visualforce Charting
Updating Charts with Refreshed Data
Controlling the Appearance of Charts
Chart Colors
Chart Layout and Annotation
Bar Charts
Other Linear Series Charts
Pie Charts
Gauge Charts
Radar Charts
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

Chart Layout and Annotation

To make your chart more understandable, add a legend, meaningful axes ranges and labels, and tips or labels on data elements.

By default all charts have a legend. To suppress the default legend, set <apex:chart legend="false">. To control the placement of the legend and the spacing of legend entries, add an <apex:legend> component to the chart. Place the legend on any of the four edges of a chart using the position attribute. Use the font attribute to control the text style used in the legend. The font attribute is a string specifying a CSS-style shorthand font property. For example, <apex:legend position="left" font="bold 24px Helvetica"/>.

Appropriate axis scaling and labeling can mean the difference between a chart that is illegible or misleading and one that is clear and persuasive. By default, an <apex:axis type="Numeric"> component sets the scale automatically based on the data fields set in the fields attribute. Automatic scaling ensures that all data fits on the chart but the chart might not begin or end with meaningful numbers. Use the minimum and maximum attributes to override the automatic scaling. To set the interval for tick marks, use the steps attribute. This attribute is an integer that specifies the number of steps between the two ends of the axis. Use the dashSize, grid, and gridFill attributes to add lines or shading to the chart to make it easier to compare measurements to the scale.

You can apply chart labels to axes and data series. When <apex:chartLabel> is a child of <apex:axis>, the labels are drawn on the outside of the axis. When <apex:chartLabel> is a child of a data series component, the labels are drawn on or near the data elements on the chart. Use the field attribute to set the text for the label. Use the display attribute to set where the label is drawn. Use the orientation and rotate attributes to adjust the text of the label so that it fits on the chart.

The orientation attribute has no effect when a <apex:chartLabel> component is used with a <apex:pieSeries> component.

Note

This sample chart uses many of these components and attributes to create a meaningful visual design:
Stacked bar chart with legend 
<apex:chart data="{!data}" height="400" width="500">
    <apex:legend position="left" font="bold 14px Helvetica"/>
    <apex:axis type="Numeric" position="left" title="Closed Won" grid="true"
        fields="data1,data2,data3" minimum="0" maximum="225" steps="8" dashSize="2">
        <apex:chartLabel />
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="name" title="2012">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries orientation="vertical" axis="left" 
        xField="name" yField="data1,data2,data3" stacked="true"/>
</apex:chart>