Bar

Bar charts

What are they?

Bar charts display data using (you guessed it) bars that are proportional to the values they represent. There are several different types of bar charts depending on the data and the story the chart is telling. Bar chart data is categorical and answers the question “how many” are in each category.

 

 


 

 

Bar chart | horizontal and vertical

 

Horizontal and vertical bar charts show bars with lengths proportional to the values they represent. One axis of the chart shows categories being compared and the other represents the value.

 

Find your platform components here:

Figma | Tableau | PowerBI

 


 

Grouped bar chart | horizontal and vertical

These grouped bar charts compare values across different categories within each group.

 

Find your platform components here:

Figma | Tableau | PowerBI

 


 

Lollipop

Lollipop charts are similar to bar charts, but are made up of a line and circle rather than a bar. The center of the circle at the end of the lollipop marks the category value.

 

Find your platform components here:

Figma | Tableau

 


 

Butterfly

Butterfly charts show two categories or two groups of categories on a y-axis on opposing sides of the vertical axis. The chart helps readers quickly identify differences between the two sides.

 

Find your platform components here:

Figma | Tableau | PowerBI

 


 

Histogram

Histograms are charts that show the distribution of a variable as a series of bars. Each bar typically covers a range of values called a bin or class. A bar’s height indicates the frequency of data points with a value in the bin.

 

Find your platform components here:

Figma | Tableau

 


 

Ribbon

Ribbon charts illustrate change in rankings among categories over time. Each category is represented by a segment within stacked bars. These segments are connected across the bars to form continuous ribbons. The segments are ordered from the largest at the top to the smallest at the bottom, allowing for a clear visual representation of how each category's rank evolves.

 

Find your platform components here:

Figma | Power BI

 


 

Waterfall

Waterfall charts show how a starting value changes through a series of positive and negative adjustments, leading to a final value. They are useful for breaking down financial data, like showing how different factors add up to a total. Because waterfall charts have a complex visual structure, they can cause confusion for audiences. Consider using bar charts, line charts or stacked bar charts to represent changes over time before using a waterfall chart

 

Find your platform components here:

Figma | Tableau | Power BI

 

 

Consider other chart types before using

Consider other chart types before using charts with this label. They might be appropriate, but less familiar charts are often misinterpreted—book office hours with the data viz team if you’re unsure.

 

 


 

Bar Chart Guidelines

X & Y Axis

Include an x-axis on column charts to establish a baseline. For bar charts, include a y-axis. Don’t let the columns or bars float without the clearly defined baseline.

dataviz-bar-chart-guideline1

 

Zero baseline

Columns and bars always should start at a zero baseline. If the columns/bars are similar in height and the differences are important but indistinguishable, consider a line chart, where a zero baseline isn’t required, or use columns/bars but plot the change or percent change.

dataviz-bar-chart-guideline2

 

Data over time

When showing data over time, try use columns instead of bars. Time is easier to read left to right than up and down. If you must plot time this way, start with the most recent data point at the top.

dataviz-bar-chart-guideline3

 

Sort, sort, sort!

Sort the bars (or columns) by greatest to least or least to greatest unless there is a category order you must follow. Don’t put the bars (or columns) in a random order.

dataviz-bar-chart-guideline4

 

Gridlines or direct labels

Use one or the other, you generally don't need both.

dataviz-bar-chart-guideline5

 

Use one color if bars show the same categorical data

If for example, the categories are showing ROI values for 4 quarters, use the same color for the four bars.

 

Use color to highlight the most important aspect of the story

Use gray to de-emphasize bars that are less important.