Data visualization

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.

Types

Simple bar chart

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

Jinja code snippet

* [_includes/organisms/chart.html](https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/jinja2/v1/_includes/organisms/chart.html)
* [_includes/organisms/mortgage-chart.html](https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/jinja2/v1/_includes/organisms/mortgage-chart.html)
* [_includes/organisms/mortgage-map.html](https://github.com/cfpb/consumerfinance.gov/blob/main/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.

Categories bar chart

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

Stacked bar chart

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

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.
  • For color guidance, view Data visualization palettes on the Color page.

Latest Updates

Page last edited:
Show all details
Edit page