Bar chart
Chart that uses rectangular bars to represent and compare values across different categories or groups.
Bar charts use rectangular bars to represent values across different categories or groups. The height or length of each bar represents the numeric value for its category.
Also known as: Bar graph, column graph.
Anatomy
A. Title (optional): Brief text summarizing the contents of the chart.
B. Data table button (optional): UI icon button enabling users to view the chart’s data in table format.
C. Keyboard instructions (required): UI icon button enabling users to access the chart’s keyboard navigation instructions.
D. Subtitle (optional): Additional text providing details, context, or instructions about the chart.
E. Plot canvas (required): Area containing the graphic part of the chart including axes, gridlines, and other elements.
F. Data markers (required): Bars representing data points where the length or height of the bar indicates its category’s value.
G. Quantitative axis (required): Scale representing numeric values, either on the horizontal or vertical axis.
H. Categorical axis (required): Scale representing categories or dates, either on the horizontal or vertical axis.
Usage
| Component variant | When to use | When not to use |
|---|---|---|
| Simple trend | To compare across categories or between individual data points. To identify the highest and lowest values at-a-glance. To understand the precise value of each data point. | If your data includes extreme values. If summarizing your data could obscure meaningful patterns in the underlying data. |
| Trend | To show how trends change over longer periods like weeks, months, or quarters. To identify when values were highest or lowest. | To enable comparisons of trends over smaller date periods, such as days or hours. Consider using a Line chart instead. To show the pace of change between data points rather than their specific values. Consider using a Line chart instead. To compare trends across several categories. Consider using a Clustered bar chart or a Stacked bar chart |
| Compare trend to benchmark | To summarize change over time and emphasize when values were above or below a benchmark or threshold, such as market average, goal, or budget. | When there isn’t a benchmark to use for comparison. Consider using the Simple trend bar chart or a sequential color palette like in the Trend bar chart example instead. |
| Compare category ranking | To rank and compare values between categories. To identify high and low values. | If you need to show composition within categories. Consider using a Clustered bar chart or a Stacked bar chart instead. If there are extreme high or low values. Consider visualizing a simple ranking instead of the quantity of each category instead. When you need to provide comparisons of category rankings across multiple metrics or quantitative variables. Consider using a Parallel coordinates plot instead. |
| Distribution summary | To compare the range of values, which values are most common, and how they are distributed around the average value. | If your data is small or contains a lot of extreme values. Consider using a dot plot or box plot instead. |
Best practices
- Ensure the chart clearly communicates important takeaways, like if the data values are in a desirable or undesirable range.
- Always start the quantitative axis at zero to avoid distorting data or exaggerating differences in bar sizes.
- Avoid displaying too many data points as this makes bar charts difficult to read and interpret.
- Consider using Pagination or group data into broader categories to limit how many data points are shown at a time.
- Provide in-context cues and labels to help users interpret the chart correctly without requiring significant effort.
Layouts
Bar charts can be displayed vertically or horizontally based on the data included. Select whichever layout will provide better legibility and scannability.
Vertical layout
In this layout, bars are displayed next to one another with taller bars representing higher values.
- Use this layout to visualize trends, where each bar represents a date period such as week or month.
- Use this layout when data has a meaningful order, like age groups or a scale (low, medium, high).
Horizontal layout
In this layout, bars are displayed along the horizontal axis with longer bars representing higher values.
- Use this layout for data with distinct categories, such as countries or market segments.
- Use this layout to help make longer category names easier to read.
Data order
Bars on the categorical axis should be arranged in a meaningful way to help users quickly grasp the point of the chart. When deciding on the data order, consider what would be the most useful reading order of the data, as well as the story being told.
- Use standard ordering for categories that are chronological, like days, months, or years, if the goal is to visualize changes over time.
- Sort categories in order of their values to emphasize ranking or the differences in quantities between categories.
Do Arrange categories in descending order from the highest to lowest values.
Don't Use alphabetical order. This makes it harder to identify patterns and doesn’t provide meaningful insights.
Chart size
Chart size should be based on the data within each chart. Use the columns in the Responsive grid system to set the width of the card, as shown below. Adjust the card’s height so the is proportional and accurately represents the shape of the data.
- Ensure charts are wide enough to be interpreted without scrolling or zooming.
- Consider the type of analysis users need to do with the chart, and ensure it’s large enough to support that goal.
Color
Color can be used to emphasize meaningful information and draw attention to the most important information in a chart. Use one color from the Neutral data visualization color palette, unless encoding additional data with color would add significant value.
- Color should never be used alone to communicate meaning. For more, visit Accessibility.
- Learn more about using color for data visualization in the Color guidelines (internal only).
Do Use color to highlight meaningful patterns or support tasks, like a sequential palette to emphasize high or low values.
Don't Use a different color for every data point, as it adds a lot of mental effort to understand the meaning of each color.
Content
- Always use sentence case except for proper nouns or acronyms.
- Use plain language and avoid abbreviations or jargon.
- Provide more detailed explanations and definitions on demand for any metrics that have complex business logic.
- Reference Content for additional guidance on crafting content within apps and experiences.
Titles and subtitles
- Use informative chart titles to help users understand the chart’s topic and what they can expect to learn from it.
- Frame titles as a headline that summarizes the trend or insight.
- Use subtitles to provide more detail about the data being shown and to help users understand how to read and interpret the chart.
- Consider phrasing summaries as questions to guide the user’s analysis, especially on exploratory dashboards where users are likely to spend significant time analyzing data.
- Avoid titles and subtitles that are general or vague.
Labels
- Ensure numbers, dates, and other data or axis labels are formatted consistently.
- Follow plain language principles, such as using shorter and simpler words and phrases.
Number format
Simplify number formats to limit unnecessary details and reduce the mental effort needed to compare numbers. If needed, numbers with higher precision can be provided in a tooltip to users who want to access more detail.
| Data type | Recommended format |
|---|---|
| Large numbers | Use abbreviated format, such as 1.2k instead of 1,200. |
| Percentage | Use whole percentage points, except for special cases where basis points are needed. |
| Basis points | Use basis points (bps) when change percentage is very small. 1 bps equals 0.01% (0.0001 in decimal format). |
| Currency | Round to the appropriate level of detail that is required for the analysis. For example, for U.S. currency round to the nearest dollar amount. |
