Visualforce Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
apex:chart
A Visualforce chart. Defines general characteristics of the chart, including size and data binding.
Example
1<!-- Page: -->
2<apex:chart data="{!pieData}">
3 <apex:pieSeries labelField="name" dataField="data1"/>
4</apex:chart>Attributes
| Attribute Name | Attribute Type | Description | Required? | API Version | Access |
|---|---|---|---|---|---|
| animate | Boolean | A Boolean value that specifies whether to animate the chart when it is first rendered. If not specified, this value defaults to true. | 23.0 | ||
| background | String | A string that specifies the color to use for the background of the chart, as an HTML-style (hexadecimal) color. If not specified, charts use a plain white background. | 26.0 | ||
| colorSet | String | A set of colors to be used by each child series. Colors are specified as HTML-style (hexadecimal) colors, and should be comma separated. For example, #00F,#0F0,#F00. These colors override the default colors used by Visualforce charts. These colors can in turn be overridden by colorSets provided to individual data series. | 26.0 | ||
| data | Object | Specifies the data binding for the chart. This can be a controller method reference in an expression, a JavaScript function, or a JavaScript object. In all cases, the result must be an array of records, and every record must contain all fields referenced in child data series components. | Yes | 23.0 | |
| floating | Boolean | A Boolean value that specifies whether to float the chart outside the regular HTML document flow using CSS absolute positioning. | 23.0 | ||
| height | String | The height of the chart rectangle, in pixels when given as an integer, or as a percentage of the height of the containing HTML element, when given as a number followed by a percent sign. Use pixels for consistent behavior across browsers and data sets. Use a percentage when dealing with varying data sets that can produce very tall and short charts. It's most useful for horizontal bar charts with many bars.
Note: It's a known issue that percentage heights don't work in Firefox. |
Yes | 23.0 | |
| hidden | Boolean | A Boolean value that specifies whether to show or hide the chart initially. Set to true to render the chart but hide it when the page is first displayed. | 23.0 | ||
| id | String | An identifier that allows the chart component to be referenced by other components on the page. | 23.0 | global | |
| legend | Boolean | A Boolean value that specifies whether to display the default chart legend. Add an <apex:legend> component to the chart for more options. If not specified, this value defaults to true. | 23.0 | ||
| name | String | Name of generated JavaScript object used to provide additional configuration, or perform dynamic operations. Name must be unique across all chart components. If the encompassing top-level component (<apex:page> or <apex:component>) is namespaced, the chart name will be prefixed with the namespace, for example, MyNamespace.MyChart. | 23.0 | ||
| rendered | Boolean | A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true. | 23.0 | ||
| renderTo | String | A string to specify the ID of the DOM element to render the chart into. | 23.0 | ||
| resizable | Boolean | A Boolean value that specifies whether or not the chart is resizable after rendering. | 23.0 | ||
| theme | String |
A string specifying the name of the chart theme to use. Themes provide pre-defined sets of colors. Available themes are:
|
26.0 | ||
| width | String | The width of the chart rectangle, in pixels when given as an integer, or as a percentage of the width of the containing HTML element, when given as a number followed by a percent sign. Use pixels for consistent behavior across browsers and data sets. Use a percentage when you want the chart to stretch with the width of the browser window. | Yes | 23.0 |