Skip Navigation

Newer Version Available

This content describes an older version of this product. View Latest

apex:chart

A Visualforce chart. Defines general characteristics of the chart, including size and data binding.

Example

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: Salesforce Blue Green Red Purple Yellow Sky Category1 Category2 Category3 Category4 Category5 Category6 The default, "Salesforce", provides colors which match charts in Salesforce reports and analytics. Use `colorSet` to define your own colors for charting components.		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