Page | Data visualisations

Chart dos and don’ts

A list of valuable usability tips and guidelines for improving your charts
Cover design: EEA
Cover photo: © EEA
Layout: EEA

Legal notice
The contents of this publication do not necessarily reflect the official opinions of the European Commission or other
institutions of the European Union. Neither the European Environment Agency nor any person or company acting on
behalf of the Agency is responsible for the use that may be made of the information contained in this report.

Copyright notice
© European Environment Agency, 2013
Reproduction is authorised, provided the source is acknowledged, save where otherwise stated.

Information about the European Union is available on the Internet. It can be accessed through the Europa server
(www.europa.eu).

Electronic publication notice

This report has been generated automagically by the EEA Web content management system on 07 Aug 2017, 08:33 AM.
This report is available as a website at https://www.eea.europa.eu/data-and-maps/daviz/learn-more/chart-dos-and-
donts. Go online to get more interactive facts and figures.
On the report web page you may download the electronic publication (EPUB) for easy reading on your preferred
eBook reader.
Please consider the environment before printing.

European Environment Agency

Kongens Nytorv 6
1050 Copenhagen K
Denmark
Tel.: + 45 33 36 71 00
Fax: + 45 33 36 71 99
Web: eea.europa.eu
Enquiries: eea.europa.eu/enquiries
Contents
Chart dos and don’ts 5
Do use the full axis and avoid distortion 5
Use consistent intervals on axis (be transparent on data gaps) 8
Remove any visual clutter (increase data-ink ratio, Tufte’s principle) 9
Use a clear language and avoid acronyms 10
Tell the "why" and "how" 10
Highlight what’s important, tell one story 10
Sort your data for easier comparisons 12
Use direct labeling wherever possible, avoiding indirect look-up 14
Rotate bar chart when category names are too long 15
Do not use legend when you have only one data category 15
Do use proper aspect ratio to minimize dramatic slopes effects 16
Do adjust for inflation in long-time series 19
Do ask others for opinions 19
Don't use 3D or blow apart effects 19
Bad chart examples 20
Avoid pie charts and donuts 21
Avoid stacked charts, difficult for comparing data 23
Don't confuse correlation with causation 26
Don’t use maps for everything that has spatial dimension 26
Video - When to *not* use maps 28
Avoid animated charts and maps, use small multiples 29
Be very careful on how you treat "no-data / missing data" 32
Don't compare apples with oranges 34
Show the level of confidence 35
Don't use more than (about) six colors 35
Don’t forget 7%-10% of your male audience (color deficiency) 38
Choose the chart type wisely 39
Related content 39
See also 39
 Do use the full axis and avoid distortion

Chart dos and don’ts

A list of valuable usability tips and guidelines for improving your charts

Do use the full axis and avoid l laevo

A
b
distortion w
o
hsesle
atadeht
For bar charts, the numerical axis (often the y axis) must
et fuT drawdE
start at zero.

 Do use the full axis for bar charts. Our eyes are very sensitive to the area of bars, and we
draw inaccurate conclusions when those bars are truncated.

Wrong Correct

Another bad example shown on BBC UK show “Breakfast”. Did really the men height doubled
from 1871 to 1971?

Chart dos and don’ts 5

 Do use the full axis and avoid distortion

If you need to show data details that are not visible when using the full axis, than the original chart
with full axis must be accompanied with a “zoomed in chart”, a so called “panel chart”. See
example below

If you have only one category to show, than you can show a portion of the chart by using a line
chart in a specific range.

Another suggestion is to “break” the axis, so that part of the axis shows the small values, then
another part of the axis shows the large values, with a section of the axis scale removed. Sounds
good, but you’ve lost any correlation between the large and small values.

6 Chart dos and don’ts

 Do use the full axis and avoid distortion

More reading http://peltiertech.com/WordPress/broken-y-axis-in-excel-chart/

Making these charts interactive will solve many of the issues stated above. For example the user
would be able to mouse over a column and get the exact value, filter out some categories or sort
the columns according to their values for easier comparison.

Chart dos and don’ts 7

 Use consistent intervals on axis (be transparent on data gaps)

Use consistent intervals on axis (be transparent on data

gaps)

 Be clear when some data is missing. Explain the reason why is missing. Use the full axis
and do not skip values when you have numerical data.

The x-axis in the "wrong example" below has a time-series with inconsistent intervals (missing
years 2003 and 2004) giving a distorted view of data over time.

Wrong Correct

Note: Data has not been reported for 2003 and 2004.

8 Chart dos and don’ts

 Remove any visual clutter (increase data-ink ratio, Tufte’s principle)

Remove any visual clutter (increase data-ink ratio,

Tufte’s principle)

 Perfection is achieved not when there is nothing more to add, but when there is nothing
left to take away Antoine de Saint-Exupery

As shown in the example above, it is important to remove any visual clutter like the dark
background and the dark grid (non-data-ink) and instead enhance the visibility of the data
information part (data-ink), in this case the bars. The grid can be removed or made in a much
more subtle style, since it is a supporting tool rather than the data itself.

Read more about Data-Ink ratio and Tufte's principles

Chart dos and don’ts 9

 Use a clear language and avoid acronyms

Use a clear language and avoid acronyms

 Try to use a clear language in your chart title and descriptions. Avoid acronyms like "MS"
and use the extended form "Member State" or even better simply "Country". It is ok
to use well-known abbreviations like EU or GDP or those your audience understand
clearly.

Tell the "why" and "how"

Most people simply identify what is being measured in the title line or other descriptive
information, leaving the reader with no help or clue on how to read or why the chart was made.

 Use a descriptive chart title and annotation that not only describe what is being measured
rather also why the reader should care and how to read the chart. This will avoid
misinterpretation and save time for the chart viewer.

Example

Original title: Cadmium emissions

Improved title with note: Change in cadmium emissions. Note: A reduction of emission is an indication of
improved air quality in major European cities.

Charts are mostly communication tools. We have already made some reasoning on the "why and
how" when we choose the chart type (bar, line, scatter plots etc.). Specific chart types are best at
showing specific aspects of the data.

You can skip this rule if you are building a raw "Statistical exploratory charting tool" where user
can slice and create any chart they want.

For end-products ready to be consumed by the target audience, you should always explain how
to read the chart and the reasoning behind it. Try to be objective and leave out any subjective
interpretations.

Highlight what’s important, tell one story

10 Chart dos and don’ts

 Use a clear language and avoid acronyms

 Although it is possible to tell hundred stories using a single line chart, it makes a lot of
sense to keep the focus on just one story.

Therefore you should highlight just one or two important lines in the chart, but keep the others as
context in the background.

Another bad example, with no highlighted story

Chart dos and don’ts 11

 Sort your data for easier comparisons

The above chart remade below in a much better version which highlight the rise and fall of
Microsoft. Do you see what has made the difference?

Sort your data for easier comparisons

The bar chart below is a good example, where the chart x-axis is sorted on the y-values not on
the alphabetic order of the country names.

 It is more important to give emphasis to the data itself and sort the chart by the data
attributes, rather than non-data attributes (for example labels like country names).

It will be otherwise very difficult if not impossible for users to do a proper comparison across the
many bars. It is in any case easy with a quick eye-scan to find your own country in the list.

12 Chart dos and don’ts

 Sort your data for easier comparisons

 If the chart is interactive, give the user the possibility to change the default sort order and
a way to filter out data and compare only a few categories.

The pie chart below (even though pie charts should be avoided) works also better when presented
with sorted data values. It starts at 12 o’clock with the largest slice. It is much easier to
understand the relations between the parts, what is bigger and what is smaller, even when the
values are not readable or the areas are very similar.

Chart dos and don’ts 13

 Use direct labeling wherever possible, avoiding indirect look-up

Use direct labeling wherever possible, avoiding indirect

look-up

 If possible label lines individually and avoid legend (Gregor Aisch, Doing the Line
Charts Right)

14 Chart dos and don’ts

 Rotate bar chart when category names are too long

Rotate bar chart when category names are too long

 Rotate bars if the category names are long (Cole Nussbaumer, my penchant for
horizontal bar charts)

Chart dos and don’ts 15

 Do use proper aspect ratio to minimize dramatic slopes effects

Do not use legend when you have only one data category

 If there is only one value category plotted in your chart, than there is no need to have a
legend. The title can already contain all needed information. Otherwise you can label
the axis directly.

Chart with a legend that is not needed (before)

The legend display one category only and it is already in the title, no need to add it to the axis
either.

Chart after we removed the unnecessary legend information

16 Chart dos and don’ts

 Do use proper aspect ratio to minimize dramatic slopes effects

Do use proper aspect ratio to minimize dramatic slopes

effects

 The slope of a line chart should be close to 45 degrees for the best perception.

Robert Kosara has a great summary of the "banking to 45 degrees" practice first proposed by Bill
Cleveland.

Here are the examples given by Kosara:

The same data is presented three ways. The slope is a reflection of the scales used on the two
axes.

However, in some cases there can be legitimate reasons why not to stick completely to "banking
to 45 degrees". For example to analyze the data and reveal certain patterns which would not be
visible in the 45 degree slope. See example below.

Chart dos and don’ts 17

 Do use proper aspect ratio to minimize dramatic slopes effects

Two plots of monthly atmospheric carbon dioxide measurements, taken from 1959 to 1990. The
first plot, with an aspect ratio of 1.17, reveals an accelerating increase in CO2 levels. The second
plot, with an aspect ratio of 7.87, facilitates closer inspection of seasonal fluctuations, revealing a
gradual attack followed by a steeper decay. Source: Computer Science Division, University of
California, Berkeley (http://vis.berkeley.edu/papers/banking/)

18 Chart dos and don’ts

 Do adjust for inflation in long-time series

Do adjust for inflation in long-time series

 When using economic values in your charts than you must be carefull about adjusting the
value according to inflation.

This is done by using the CPI (consumer price index). A Euro in 2010 just does not have the
same spending power as a Euro in 1961.

Source: http://www.aboutinflation.com/inflation/european-union---inflation

The purchasing power of €100 EUR in year 1961 is equivalent to €1948 EUR in year 2010.

Do ask others for opinions

 Have a fresh set of eyes look at what you've done and give you feedback. You may be
surprised by what is confusing – or enlightening! – to others.

Don't use 3D or blow apart effects

 Studies show that 3D effects reduce comprehension. Blow apart effects likewise make it
hard to compare elements and judge areas.

Chart dos and don’ts 19

 Do adjust for inflation in long-time series

Bad chart examples

Below a very creative 3D-pie chart and very incomprehensible as well.

Below another (in)famous “churtjunk”. Compare the 21,2% with the 19,5% slices in the pie. Which
one looks bigger?

(presented by Steve Jobs at Engadget 2008 http://www.engadget.com/2008/01/15/live-from-

macworld-2008-steve-jobs-keynote/)

20 Chart dos and don’ts

 Avoid pie charts and donuts

Avoid pie charts and donuts

The human mind thinks linearly: we can easily compare lengths/heights of line segments but
when it comes to angles and areas most of us can't judge them well. Therefore try to avoid the
use of pie charts when comparing a large number of items. Simple pie charts displaying 2-3
categories may work just fine, but when displaying more data it is better to choose another chart
type.

 It is difficult to compare many slices in a pie chart. Try alternative charts to convey your
message, most often bar or column charts will be a much better alternative.

Chart dos and don’ts 21

 Avoid pie charts and donuts

The pie chart shows United States

population by state. However id does
a very bad job in communicating the
data. There are just too many slices.

A sorted column/bar chart will work

much better. The values are much
easier to compare in a bar/line chart
than in a pie chart. If you need to
show parts of a whole (percentages),
you can still use a column chart with
the y-axis having percentages.

Pie charts do not work well even

when displaying a few categories. See the three examples below. In all three examples all slices
in the pie charts looks very similar and one cannot precisely distinguish and compare the
differences between them. The alternative column charts are superior, clear and display the
quantitative data correctly.

22 Chart dos and don’ts

 Avoid stacked charts, difficult for comparing data

The donut chart is just another pie chart with a hole punched in the middle. The donut chart is a
useless chart made worse. Avoid donut charts for the same reasons.

Further reading:

Countdown of Top 10 Reasons to Never Ever Use a Pie Chart

Storytelling with data: alternatives to pies

Avoid stacked charts, difficult for comparing data

 Avoid stacked charts since the parts in the stacked charts are difficult to compare with
each other.

To solve this issue some chart tools allow the user to filter out interactively the stacked categories
and be able to do have a single category displayed.

Same issue applies to stacked areas charts. It is difficult to compare the areas in the different
regions when stacked (figure above) and much easier to have them as lines (figure below) and a

Chart dos and don’ts 23

 Avoid stacked charts, difficult for comparing data

separate line for total.

Another example on how bad stacked bar charts can be in certain cases

Let’s see how the chart above looks like as a line chart

24 Chart dos and don’ts

 Avoid stacked charts, difficult for comparing data

Now we can clearly see the decline of household category “Married Couples with Children”.
Moreover we can more clearly see the trends in the other categories as well.

More reading http://junkcharts.typepad.com/junk_charts/2013/05/more-power-brings-more-

responsibility.html

Chart dos and don’ts 25

 Don't confuse correlation with causation

Don't confuse correlation with causation

 Quite often superimposing time series of two different measurements will show a strong
correlation. Many things change same way over time. It is an easy mistake to confuse
correlation with causation.

For example if you plot two different data series (A and B) on a common time series, you will
notice that both follow a similar pattern over time. It is very hard if not impossible to prove that A
cause B or viceversa. There are so many third factors that have influence both on A and B that
are not plotted on the chart. Many other external factors can be the cause of both A and B
changing the same way over time. Only a very large profound statistical-based study on all
factors can give some indication of causation, if any exists.

See "Superimposing time series is the biggest source of silly theories"

Even correlation can be questionable when seen on a chart. See de-noising data, a method for
identify true correlation by removing the time-series data

Don’t use maps for everything that has spatial dimension

 Even though your data has a geographical dimension, it doesn't automatically mean that it
will best be displayed on a map. Choose your chart type wisely.

In fact most data has a geographical dimension if we think about it but it does not always convey
new insight when displayed on a map. A very bad map example below, where a huge amount of
data is displayed just because it has a location attached to it. However the user does not get any
insight from this map. There is no correlation or pattern in this map which we could further

26 Chart dos and don’ts

 Don't confuse correlation with causation

investigate.

Bad map example

Good map example

History gives us some good examples

The famous map from John Snow 1854, one of the
first map data visualization. It is an excellent example
of when it is appropriate to use a map for getting
insight on data. In this case a strong correlation was
found between the cholera outbreaks and the
positions of water pumps. Further investigation
confirmed that the water was contaminated and this
* was the cause of cholera outbreaks concentrated
around those areas.

Video - When to *not* use maps

Chart dos and don’ts 27

 Don't confuse correlation with causation

Another bad example of where a map feels “in the way” and making it more difficult to
understand the data displayed on it.

source: Nordregio.se

The map above displays where different sectors

of High-Tech manufacturing and R&D is located
in the Nordic countries together with their sizes
(number of employed in sector). The map does
pretty well the job of displaying where these jobs
are located, but it is useless when used for
comparing the different sizes of the circles.
Moreover it is implicit that most jobs are located
near the large cities like Copenhagen, Malmö,
Gothenburg, Oslo, Stockholm and Helsinki. We
learn nothing new here.

It would be much more interesting to see the

sectors data plotted on a bar chart (see figure
below), optionally grouped by country or other
regions. It would make it easier to see which
region has most jobs in which sector and easier
to compare the different sectors sizes with each
other, if that is the story we want to tell.

28 Chart dos and don’ts

 Avoid animated charts and maps, use small multiples

Avoid animated charts and maps, use small multiples

 When a chart or map moves it is difficult to remember the values that were shown in
previous scenes and compare with values in a current scene. It is also impossible to
print the visualization.

A series of small charts / maps, so called small multiples, may convey the message
much better than an animation.

Below an excellent example of a small multiple which effectively shows the trend over time for
consumption of liquor per person by county. An animated chart or a map would not have been
able to achieve such scientific elegance in representation of data.

Chart dos and don’ts 29

 Avoid animated charts and maps, use small multiples

See other examples when small multiple chart is the best alternative to a map

Below an animated map showing water stress in several river basin districts over four seasons
during 2002-2012. Although the animation may be appealing to the eye, it is difficult to use in order
to compare different years or seasons.

30 Chart dos and don’ts

 Avoid animated charts and maps, use small multiples

Experimenting with the speed of the animation will help you see any pattern that are otherwise
hidden if the speed is too slow or too fast.

Below same data shown as small multiples. Since the maps are shown by year and by season, it
is easier to compare any year to any year or any season to any other season. We can clearly see
that the summers are those with highest water exploitation index and that south Europe,
especially Spain is the most affected. In North Europe, England, Copenhagen and Stockholm
area also stands out. We can also see that there is no up- or down-trend over time for all
seasons. A small multiple of line charts would probably work even better than the map.

Chart dos and don’ts 31

 Be very careful on how you treat "no-data / missing data"

32 Chart dos and don’ts

 Be very careful on how you treat "no-data / missing data"

Be very careful on how you treat "no-data / missing

data"
Take the following chart as an example of the results of certain observations made on the street,
just by observing people passing by car / bike or any other transport type. We want to see how
many men or women are passing in a specific time frame. When we are not able to identify the
gender we would mark it as "unknown". After 1000 observations we would stop collecting data.

Wrong Correct

The left chart says that 33,5% males and 28,6% females passed by on the street and 37,9%
where unknown (the missing data). However we all know that on any given day for a long period
of time there should be around 50% male and 50% female (unless we are on a very gender-
specific area of the city). The issue with the chart above is that the unknown must not be treated
as a third category different from the other two. The unknown contains actually both male and
female most probably with the same distribution. Therefore the missing data must be removed
and only reported separately. This is standard practice in all statistical survey. On the right the
chart corrected, without the unknown. In this case an indication of a margin of error would also
help.

Chart dos and don’ts 33

 Don't compare apples with oranges

Don't compare apples with oranges

This rule sounds trivial but it can be quite difficult to respect it when things may look identical to
us. For example image the following trend analysis of CO2 emissions over time in Europe. From
a simplistic point of view we are looking at the trend over time for the EU from 1995 to 2014 and
all looks fine. However the EU did not consist of the same countries over time and therefore we
cannot compare EU12 with EU25 or EU28. The countries that formed EU12 are not statistically
equally representatives for all the countries that are part of EU28. We are comparing apples with
oranges indeed.

34 Chart dos and don’ts

 Show the level of confidence

Show the level of confidence

 Tell your audience how confident you are in your assertions by.
Include error bars any time you use data to make an argument

Source: The importance of uncertainty, Berkeley Science review.

Don't use more than (about) six colors

 Using color categories that are relatively universal makes it easier to see differences
between colors.

Chart dos and don’ts 35

 Show the level of confidence

Different colors should be used for different categories (e.g., male/female, types of fruit),
not different values in a range (e.g., age, temperature).
Do not use rainbows for range values
If you want color to show a numerical value, use a range that goes from white to a highly
saturated color in one of the universal color categories. no rainbows

Example of bad chart, where we use different colors for same measurement

Now redone with a gradient color:

36 Chart dos and don’ts

Show the level of confidence

Chart dos and don’ts 37

 Don’t forget 7%-10% of your male audience (color deficiency)

Don’t forget 7%-10% of your male audience (color

deficiency)

 Remember, 7% to 10% of the male audience have color deficiency issues (color
blindness). Therefore make your charts safe against color-blindness.

As an example consider the following chart.

Below you have the same chart displayed as a color-blind person would see it.

Use Vischeck to test your images.

If the chart is readable in black and white than it is even better!

38 Chart dos and don’ts

 Choose the chart type wisely

Choose the chart type wisely

Before you start charting, take a step back and

ask yourself what are the main questions you
want to answer. Choose the right chart type that
is best for finding specific patterns and gain
possible new insights in your data. Online tools
like the Data Visualization Catalogue or
a decision diagram [2006, A.Abela] helps you
finding the right chart for your data.

http://guides.library.duke.edu/topten
http://www.slideshare.net/idigdata/data-
visualization-best-practices-2013
http://www.amazon.com/Envisioning-
Information-Edward-R-Tufte/dp/0961392118
http://en.wikipedia.org/wiki/Misleading_graph
http://junkcharts.typepad.com/
http://www.datasciencecentral.com/profiles/blogs/data-science-ebook-2nd-edition-table-of-
content
http://darkhorseanalytics.com/blog/data-looks-better-naked/

Related content
See also
Water exploitation index 2002 - 2012 - small multiples [https://www.eea.europa.eu/data-and-
maps/daviz/learn-more/water-exploitation-index-2002-2012/view]
Web editing and system integration tasks [https://www.eea.europa.eu/soer-2015/help/web-
integrators]
chart after we removed the unnecessary legend information [https://www.eea.europa.eu/data-and-
maps/daviz/learn-more/legendafter.png/view]
chart with no need for legend [https://www.eea.europa.eu/data-and-maps/daviz/learn-
more/copy_of_legendbefore.png/view]

Chart dos and don’ts 39

 Choose the chart type wisely

Published on 05 Nov 2013

40 Chart dos and don’ts