Vertical Bar Charts

How to use this page

All examples and samples on this page serve as a baseline. Start with the styles available here to maintain consistency. You may add additional complexity if needed, but be cognizant of users’ mental load, and use a different visualization if these charts aren’t the best fit.

---

Bar Charts

Bar charts are used to compare numerical values, such as integers or percentages, by representing each variable with the length of a bar. They are particularly useful for highlighting variations across categories, such as a restaurant’s expenses by type or item sales per channel over time.

Variations

• Basic Bar Chart
• Grouped Bar Chart
• Stacked Bar Chart
• Histogram

Labels and legends should be included to clarify specific data points.

Bar Chart Guidelines

When creating bar charts, consistency is key. Use the styles provided as a starting point, and keep the design as simple as possible to reduce cognitive load for users. If additional complexity is required, ensure it serves the user’s needs without overwhelming them.

Choosing the Right Chart Type

Select the chart type based on your data and the user’s goals:

• Basic Bar Chart: Best for categorical data.
• Grouped Bar Chart: Ideal for comparing multiple variables across categories.
• Stacked Bar Chart: Useful when showing the total sum of variables within categories.
• Histogram: Perfect for displaying data distributions.

If your visualization needs go beyond these chart types, use the existing styles as a baseline.

---

Basic Bar Chart

Basic Bar Charts display categorical data. Use vertical bars for time-based data and horizontal bars for data with longer labels or when time is not a factor. Keep the chart simple and include clear labels.

Grouped Bar Chart

Grouped Bar Charts compare multiple variables within categories. Bars are grouped by category, making it easy to compare values within the same group.

• Use no more than three bars per group to ensure clarity.
• For comparing group totals across multiple variables, consider a Stacked Bar Chart instead.

Stacked Bar Chart

Stacked Bar Charts display the sum of multiple variables while showing the breakdown of each category. This type is best for highlighting group totals.

• Use a legend to clearly identify each segments color.
• Be aware that comparing subcategories within groups can be more difficult with this chart type.

Histogram

Histograms visualize the distribution of data values by grouping them into equal-sized bins. The height of each bar represents the count of values within each bin.

• Ensure bins are of equal size for accurate comparisons.
• Use histograms to identify peaks, distribution patterns, and outliers.

Combination Charts

For charts that combine bars and trend lines:

• Add data markers only if users need to see exact data points. Use sparingly to avoid visual clutter.
• Use consistent colors and styling to differentiate bars and lines clearly.

Additional Tips

• Always include a legend to explain colors and symbols.
• Label axes clearly and use a logical scale.
• Avoid excessive data density—prioritize readability and clarity.
• Use tooltips or annotations to provide additional context when necessary.

---

General Chart Pitfalls

Fig. 1: Do not start your axis at a non-zero baseline. Doing this can misrepresent your data.

Fig. 2: Do not use different colors to show the same metric on a bar chart (unless an additional metric is indicated and visible in a legend).

Fig. 3: Do not use bars of different widths, or space them unevenly

Fig. 4: Do not use a combination chart to compare more than 4 variables. This becomes overwhelming for the user.