---
schema_version: "1"
id: 35316d9b0a31f27ae464293c5ebd54eb57c4e5f06e00690f96b1b15b5307db18
title: Bar Charts
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/charting/pages-charting-appearance-bar-charts.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-bar-charts.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 76571259ac7f952f672f14a68d437b9cdb5923cf5af312c63293916dd08060cf
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Bar Charts

Bar charts are one of several linear data series charts available in Visualforce. Linear series charts are charts plotted against a standard rectangular grid.

Each data element in a linear series is described by an _X,Y_ coordinate. The data series defines how to draw the coordinate on the grid. The `<apex:barSeries>` charts draw bars stretching between an origin axis and the _X,Y_ coordinates. The `orientation` attribute determines whether the origin axis is the left axis (Y) or the bottom axis (X). Set `<apex:barSeries orientation="horizontal">` for bars that originate on the left side of the chart, and `<apex:barSeries orientation="vertical">` for a column chart with bars that rise from the bottom of the chart.

To plot multiple data points for each bar interval, group or stack the bars within a single `<apex:barSeries>` tag. Multiple `<apex:barSeries>` tags in a single chart draw on top of each other, obscuring all but the last data series. To create a vertical column chart, add all fields to be grouped or stacked to the `yField` attribute:

```visualforce
<apex:barSeries orientation="vertical" axis="left" 
    xField="name" yField="data1,data2,data3"/>
```

By default, data fields in an `<apex:barSeries>` are grouped on a chart. To stack them on top of each other, set `stacked="true"`.

![Grouped vs. Stacked Bar Charts](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_charting_grouped_vs_stacked_bar_charts.png)

Use the `gutter` attribute to adjust spacing between grouped bars. Use the `groupGutter` attribute to adjust spacing between groups. Use the `xPadding` and `yPadding` attributes to adjust the spacing between the chart axes and the bars themselves.

By default, legend titles for stacked or grouped bar charts use the names of fields in the `yField` attribute. In the previous example, the default titles are “data1”, “data2”, and “data3”. To give the legend more meaningful titles, use the `title` attribute of the `<apex:barSeries>` component. Use commas to separate items. For example, `title="MacDonald,Promas,Worle"`:

![Stacked bar chart with legend](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_charting_bar_stacked_with_legend.png)

```visualforce
<apex:chart data="{!data}" height="400" width="500">
    <apex:legend position="left"/>
    <apex:axis type="Numeric" position="left" title="Closed Won" grid="true"
        fields="data1,data2,data3" dashSize="2">
        <apex:chartLabel/>
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="name" title="Stacked Bars">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries orientation="vertical" axis="left" stacked="true"
        xField="name" yField="data1,data2,data3" title="MacDonald,Promas,Worle"/>
</apex:chart>
```

**See Also**  


-   [Chart Colors](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-colors.md)
-   [Chart Layout and Annotation](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-appearance-layout.md)