apex:barSeries

A data series to be rendered as bars in a Visualforce chart. At a minimum you must specify the fields in the data collection to use as X and Y values for each bar, as well as the X and Y axes to scale against. Add multiple Y values to add grouped or stacked bar segments to the chart. Each segment takes a new color.

Note: This component must be enclosed within an <apex:chart> component. You can have multiple <apex:barSeries> and <apex:lineSeries> components in a single chart. You can also add <apex:areaSeries> and <apex:scatterSeries> components, but the results might not be very readable.

Example

1<!-- Page: -->
2<apex:chart height="400" width="700" data="{!data}">
3    <apex:axis type="Numeric" position="left" fields="data1"
4        title="Opportunities Closed" grid="true"/>
5    <apex:axis type="Numeric" position="right" fields="data3"
6        title="Revenue (millions)"/>
7    <apex:axis type="Category" position="bottom" fields="name"
8        title="Month of the Year"/>
9    <apex:barSeries title="Monthly Sales" orientation="vertical" axis="right"
10        xField="name" yField="data3">
11        <apex:chartTips height="20" width="120"/>
12    </apex:barSeries>
13    <apex:lineSeries title="Closed-Won" axis="left" xField="name" yField="data1"/>
14</apex:chart>

Attributes

Attribute Name	Attribute Type	Description	Required?	API Version	Access
`axis`	String	Which axis this chart series should bind to. Must be one of the four edges of the chart: left right top bottom The axis bound to must be defined by a sibling `<apex:axis>` component.	Yes	23.0
`colorSet`	String	A set of color values used, in order, as bar fill colors. Colors are specified as HTML-style (hexadecimal) colors, and should be comma separated. For example, `#00F,#0F0,#F00`.		26.0
`colorsProgressWithinSeries`	Boolean	A Boolean value that specifies how to progress through the values of the `colorSet` attribute. When set to true, the first color in the `colorSet` is used for the first bar (or bar segment, when the `<apex:barSeries>` is stacked) in an `<apex:barSeries>`, the second color for the second bar, and so on. Colors restart at the beginning for each `<apex:barSeries>`. When set to false, the default, the first color in the `colorSet` is used for all bars in the first `<apex:barSeries>`, the second color is used for bars in the second `<apex:barSeries>`, and so on.		26.0
`groupGutter`	Integer	An integer specifying the spacing between groups of bars, as a percentage of the bar width.		26.0
`gutter`	Integer	An integer specifying the spacing between individual bars, as a percentage of the bar width.		26.0
`highlight`	Boolean	A Boolean value that specifies whether each bar should be highlighted when the mouse pointer passes over it. If not specified, this value defaults to true.		23.0
`highlightColor`	String	A string that specifies the HTML-style color overlayed on a bar when it's highlighted.		26.0
`highlightLineWidth`	Integer	An integer that specifies the width in pixels of the line that surrounds a bar when it's highlighted.		26.0
`highlightOpacity`	String	A decimal number between 0 (transparent) and 1 (opaque) representing the opacity of the color overlayed on a bar when it's highlighted.		26.0
`highlightStroke`	String	A string that specifies the HTML-style color of the line that surrounds a bar when it's highlighted.		26.0
`id`	String	An identifier that allows the chart component to be referenced by other components on the page.		23.0	global
`orientation`	String	The direction of the bars in the chart. Valid options are: horizontal vertical	Yes	23.0
`rendered`	Boolean	A Boolean value that specifies whether the chart series is rendered in the chart. If not specified, this value defaults to true.		23.0
`rendererFn`	String	A string that specifies the name of a JavaScript function that augments or overrides how each bar is rendered. Implement to provide additional styling or to augment data.		26.0
`showInLegend`	Boolean	A Boolean value that specifies whether this chart series should be added to the chart legend. If not specified, this value defaults to true.		23.0
`stacked`	Boolean	A Boolean value that specifies whether to group or stack bar values.		26.0
`tips`	Boolean	A Boolean value that specifies whether to display a tool tip for each bar when the mouse pointer passes over it. The format of the tip is `xField: yField`. If not specified, this value defaults to true.		23.0
`title`	String	The title of this chart series, which is displayed in the chart legend. For stacked charts with multiple data series in the `yField`, separate each series title with a comma. For example: `title="MacDonald,Picard,Worle"`.		23.0
`xField`	String	The field in each record provided in the chart data from which to retrieve the x-axis value for each data point in the series. This field must exist in every record in the chart data.	Yes	23.0
`xPadding`	Integer	An integer specifying the padding in pixels between the left and right axes and the chart's bars.		26.0
`yField`	String	The field in each record provided in the chart data from which to retrieve the y-axis value for each data point in the series. This field must exist in every record in the chart data.	Yes	23.0
`yPadding`	Integer	An integer specifying the padding in pixels between the top and bottom axes and the chart's bars.		26.0

Visualforce Developer Guide

apex:barSeries

Example

Attributes

See Also