# 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 `` component. You can have multiple `` and `` components in a single chart. You can also add `` and `` components, but the results might not be very readable. ## Example ```apex ``` ## 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, or bottom The axis bound to must be defined by a sibling `` 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 `` is stacked) in an ``, the second color for the second bar, and so on. Colors restart at the beginning for each ``. When set to false, the default, the first color in the `colorSet` is used for all bars in the first ``, the second color is used for bars in the second ``, 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 or 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. `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 | | **See Also** - [apex:chart](/docs/platform/salesforce-pages-developers-guide/guide/pages-compref-chart.md) - [Bar Charts](/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-bar-charts.md) - [Visualforce Charting](/docs/platform/salesforce-pages-developers-guide/guide/pages-charting.md)