An official website of the United States government
Bar and Bar Combo Charts
Best Practices
Overview
The primary use of a bar chart is to show comparisons between time periods or categories. One axis shows items to compare while the other displays the value being measured; the longer the bar the greater its value. The primary goal of a bar chart is to showcase the relationship between the two axes. A grouped bar chart visualization is displayed if the data set has multiple data series within it.
Combo options: The bar-line combo chart type allows you to show one or more data series as lines. You can use this type for mean values, median values, etc. (See example bar-line combo.) The bar-pie combo shows both a bar chart and a pie chart of the same data. Hovering over one chart filters the other. For example, hovering over a bar in the bar chart filters the pie data to that point in the timeline. (See example bar-pie combo.)
Chart is an interactive content type in the WCMS. Go to examples at the bottom of this page to try out “live” charts.
Interacting with the labels in the legend will highlight or isolate the selected data series. Each data series can be toggled on and off individually, allowing users to view a wide variety of combinations.
Sorting: Selecting the top row of a column sorts the entire table by the content within the selected column. Selecting the same column multiple times rotates the sorting feature between three states: Descending, Ascending and Off. Only a single column can be sorted at one time.
Source: When referencing information from outside of the current page, you should provide a source link. Source links should be short and descriptive; they should not be the full URL. Source links are always displayed directly above the table.
Usage
Bar charts are used to easily compare data among categories and between groups at a glance. They reveal patterns, trends, relationships and exceptions in data values that are not readily apparent from a table of values.
Use:
- When comparing categories
- When showing big changes in data
Don’t Use:
- When showing small incremental changes
Other Guidance
- Chart Title: Good titles are invaluable. Your chart title should be long enough so that your audience can make sense of the chart. A glance at the title should clearly convey what the chart contains. A good title requires a balance between a short title and one with enough descriptive information to describe the chart clearly.
- Number of Series Bars: Too many series bars result in visual clutter and make the chart difficult to interpret. One to four bars with a maximum of six bars is recommended. The Chart Builder supports up to nine different colored bars in a bar chart. However, if you have more than six sets of quantitative values, consider breaking them into multiple charts.
- Grid Lines: In most cases, both horizontal and vertical grid lines should be hidden to reduce chart clutter. Approximate values can be perceived without grid lines. When the difference in data values is close, horizontal grid lines can be shown to better support data value comparison.
- Data Source: The data source makes your graphic more reputable. It also allows those who are interested to dig deeper.
- Outliers in Series Bar Data: If the data set includes one or more extreme outliers, the visualization can be difficult to process. If the variation can be seen only on a single bar and the rest are flat, do one of the following: Modify the data set to remove / adjust the outlier issue, split the chart into multiple charts, or select a different chart type.
- Confidence Intervals: Confidence intervals give an indication of the certainty of the dataset. In the Data Import Wizard, you can configure the chart to show confidence intervals in the chart visualization. See chart example.
- Filtering: Filtering options can be set in the Data Import Wizard. To create a filter, select a data column that describes a variable (gender, age group, etc.) and provide a label. This creates a drop-down menu with the possible options for the specified data column. When a site visitor changes the drop-down selection, the chart and data are refreshed to show only the rows of data for the selected label. Note that filters can be applied only to a “Columns and Rows combined” data set, the second option in the data-import screen capture below. See chart example.
- Social Media Sharing: The Chart Configuration tool allows you to specify a URL, title, and description for social media posts. It also supports display of the chart embed code for copying.
Chart Color Palettes
- Go to ExamplesSee examples on this page that illustrate key options.
- Building in the WCMSSee key tips and guidelines for working with bar charts in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
Standard Time-Based Bar Chart
Note that selecting a data series in the legend below isolates the series (whereas in the next example the series is highlighted when selected). See example data file [XLS – 335 B]. Note that you do not have to chart all the data series in the source file. This source file contains 6 data series, but in the Data Series section of the Chart Configuration tab, the developer has selected only 3 series for the chart.
Standard Categorical (Non-Time-Based) Bar Chart
With WCMS release 4.8.2, the bar chart now supports non-time-based data, as illustrated below. See example data file [XLS – 97 B].
Combo Bar-Line Chart
To create a chart like the one below, remember to select Combo Bar-Line Chart as the chart type. Then in the Data Series section of the Chart Configuration tab, check “Display as Line” for any data series you want to display as a line instead of a bar. See example data file [XLS – 300 B]. (Note that you can allow your users to download the table data in CSV format, as illustrated with this chart.)
Stacked Bar Chart
To create a chart like the one below, select “Bar Chart” as the type and then select the option “Stack Bars.” Stacked bars can work well to show percentages when every bar totals 100.
Combo Bar-Pie Chart
To create a chart like the one below, select Combo Bar-Pie as the chart type. See example data file [XLS – 335 B].
Filterable Bar Chart
The filterable bar chart is easy to create as long as your data file supports it. During data configuration, you must specify each filter by entering a filter label and selecting the filterable column in the source data. See example data file. [XLS – 2 KB]
Bar with CIs in Visualization
If you have high and low CI columns in your source data, you can easily specify that CIs display in the visualization area. During data configuration, select the high and low columns in the “Confidence Intervals” section. See example data file [XLS – 189 B].