Bar Charts

Use bar or column charts to show comparisons of different discrete items, factors or categories. Comparisons could include items that can be counted and categorized. These are some of the easiest charts to interpret because the data is shown by length of bar.

Information about Bar Charts can be found at:

http://cfpb.github.io/design-manual/data-visualization/chart-types.html#bar-or-column-charts

Simple bar chart

Horizontal bar chart showing breakdown of complaints in other financial services category.

Some sample code will eventually show up here.

HTML code snippet

<marquee>Some sample code will eventually show up here.</marquee>

Jinja code snippet

* [_includes/organisms/chart.html](https://github.com/cfpb/cfgov-refresh/blob/master/cfgov/jinja2/v1/_includes/organisms/chart.html)
* [_includes/organisms/mortgage-chart.html](https://github.com/cfpb/cfgov-refresh/blob/master/cfgov/jinja2/v1/_includes/organisms/mortgage-chart.html)
* [_includes/organisms/mortgage-map.html](https://github.com/cfpb/cfgov-refresh/blob/master/cfgov/jinja2/v1/_includes/organisms/mortgage-map.html)

Grouped bar chart

Bar charts showing complaints by type for New York metro area, New York state and the United States.

Some sample code will eventually show up here.

HTML code snippet

<marquee>Some sample code will eventually show up here.</marquee>

Categories bar chart

Bar charts showing complaints by region (New York metro area, New York state and the United States) for different financial categories.

HTML code snippet

Stacked bar chart

Stacked bar chart showing breakdown of complaints in other financial services category.

HTML code snippet

Content guidelines

  • If exact numbers are important, the bars should be labeled with the value.
  • When possible label directly rather than relying on color.
  • For stacked charts, use a white line or stroke to create contrast between bar chunks.
Edit this page
Add new page