Bar Charts : Visualizing Quantitative Data

Bar charts are used to visualize quantitative data. Since bar charts differentiate by length, we recommend that in most cases they be used rather than donut or pie charts, which differentiate by angle and area.

Vertical Bar Chart
The most common use case for vertical charts is to show data changes over a period of time or for illustrating comparisons among items. In vertical charts, the x-axis represents category or time and the y-axis represents the value.

Grouped Vertical Charts

The most common use case for grouped charts is to show information about different sub-groups of main categories. The x-axis of grouped vertical charts represents sub-group or time and the y-axis represents the value.

Horizontal Bar Chart
Use a horizontal bar chart if time is not represented by an axis and if either of the following conditions exist:
A ranking in descending order is the relationship being conveyed
The labels for the categorical subdivisions don’t fit side by side
In horizontal bar charts, the x-axis represents the value and the y-axis represents the category.

Grouped Horizontal Charts

The most common use case for grouped charts is to show information about different sub-groups of main categories. The x-axis of grouped vertical charts represents the value and the y-axis represents the sub-group.

The following components make up a bar chart

Axis Labels:

For vertical charts:

Horizontal axis labels display the series names and are recommended, but can be omitted if necessary due to space constraints and responsiveness. If omitted a legend must be available.

Vertical axis labels display values

For horizontal charts:

Vertical axis labels display the series names and are recommended, but can be omitted if necessary due to space constraints and responsiveness. If omitted a legend must be available.

Horizontal axis labels display values

Axis Tick Marks (optional):

There can be both major and minor tick marks on the vertical axis of vertical charts. Tick marks are not needed on the horizontal axis of vertical charts since the horizontal axis of a vertical bar chart is not a quantitative scale line.

There can be both major and minor tick marks on the horizontal axis of horizontal bar charts. Tick marks are not needed on the vertical axis of horizontal charts since the vertical axis of a horizontal bar chart is not a quantitative scale line.

Grid Lines (optional):

Horizontal grid lines are suggested for vertical charts, but should not be used with horizontal bar charts.

Vertical grid lines are suggested for horizontal charts, but should not be used with vertical charts.

Bar

Interaction (optional):

If drill down behavior is supported, clicking on an item will navigate to the appropriate page.

If supporting, right clicking on an item will bring up a menu with associated actions.

Width: All bars should be the same width.

Fill: For recommendations on fill colors, see the Color Palette.

Height: Bar height in vertical charts is the dimension that represents its value.

Length: Bar height in horizontal charts is the dimension that represents its value.

Bar Spacing: Spacing between bars should be equal. In the case of grouped charts, increase the spacing between main categories.

Tooltip: We recommend that the name and value are displayed on hover.

Legend (optional):

Include a legend to indicate the series with the bar color.

We recommend placing the legend left aligned under the chart.

Interactive Legend (optional): Clicking on a series in the legend should toggle the visibility of the series in the chart.

What’s not covered in the current design

Dealing with missing data points

Stacked Bar Charts

Next Steps

The above is considered conceptual design, final visual design will be created and examples in context will be provided. This design pattern will be going through it’s final stage of the PatternFly process.

Have we missed any requirements? Please leave a comment below if you think we need to make any clarifications in the next iteration! Any feedback will be appreciated. Thank you!

6 Responses to “Bar Charts : Visualizing Quantitative Data”

Very good! The only thing that called my attention was the use of different colors (tones of gray) in the vertical/horizontal bar chart. Once I found an article explaining that for the same kind of information (Q) we should not use different colors (although everybody does :). You can find in pages 3/4 of this paper: http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf
Just wanted to bring this point to be considered. Thanks

@Gabriel, great point on colors. these are low level mockups and I intentionally did not use color :) In the next steps, we will have Visual Designers coming back with suggestions on colors – when to use different colors versus gradations versus grays, etc. Thanks very much for the pointer to the doc, very helpful!

Good stuff! My project is working on a bar chart now and some additional features we’re implementing hat aren’t mentioned here are hover text for each bar, ability to click on a bar to go to a details page, and a dropdown or slider to change the time scale.