Categories: Charting Guidelines

Chart Usability Tips That Improve Data Visualization UX

In a previous post, we had discussed how to increase the usability of your charts instantly using some simple tips. In this post, I will discuss some lesser-known tips that can enhance the usability of your charts further and help make more sense out of the data plotted on them.

Remove unnecessary precision

If you are talking about four million dollars of profits every year, then talking about the twenty five cents part of the figure would hardly interest anyone. Remove the unnecessary precision.

Round off the numbers to their nearest integer, or even hundreds and thousands.

Show predicted values using a dashed border

Many a times during sales forecasting or project planning, you need to show predicted values on the chart. To avoid the user mixing up the known and the predicted values during his deep analysis, show the predicted values using a dashed border.

Dashed borders are sometimes used to highlight a data set as well. But with a small note in the caption or axis labels mentioning this, you can make it clear that you are showing predicted values using the dashed border.

Use vertical separators when plotting data for irregular intervals

Say you are displaying monthly data from Nov 08 to Aug 09 which happens to be an irregular time period to plot data for. People are either used to seeing monthly data for all the 12 months one after another or quarterly data for all the 4 quarters one after another but surely not monthly data for Nov 08 to Aug 09.

Typically, the dynamics from one calendar year to another change quite a bit. To make sure that the user knows when 2008 ends and when 2009 starts even when he is deeply immersed in his data analysis, put a vertical separator line between 2008 and 2009. Your data stays the same, just that with the separator you are doubly sure the user will know the transition from one year to another.

[Dig deeper: Learn how to add vertical separator lines to your chart]

Have you been using any of these tips already? Do you find them helpful? What else would you like to see on the blog? We would love to hear from you in the comments.

sanket

View Comments

  • Great, post. Could you please elaborate on how to display partial data and projections on the same chart. For instance if you are halfway through the year of lets say 2011 as we are now, how do you suggest showing the actual data and the projected data for 2011?

    • Thanks for checking in Danie. The projected data is best shown using a dashed border as I have discussed in the post. So for the initial 6 months where you have actual data, show that using the normal border and then the remaining 6 months where you are showing projections, show it with a dashed border (or a dashed line in case of a line chart). In case you want to be doubly sure, you can possibly add a vertical line saying "Projected values here onwards" but I don't really think that would be a necessity.

Recent Posts

What Is a Line Chart? A Complete Guide to Uses, Types, and Best Practices

TL;DR A line chart plots data points along an x-axis (time) and y-axis (value), connected…

2 weeks ago

What Is a Column Chart? Examples, Uses, Types, and Best Practices

Bar charts, line charts, column charts- they all look similar, but picking the wrong one…

3 weeks ago

What Is an Area Chart? A Complete Guide to Uses, Types, and Best Practices

An area chart has been seen before, perhaps monitoring stock market data, web traffic, or…

3 weeks ago

What Is a Bar Chart? Definition, Types, Uses, and Best Practices

Have you ever read a quarterly report of a company, a sports result, or a…

3 weeks ago

How to Choose a JavaScript Library for Interactive Charts

Quick Answer: Choose a JavaScript library based on the charts and interactions your application needs.…

4 weeks ago

What Is the Best Data Visualization Library for Interactive Dashboards?

Interactive dashboards have become essential for SaaS applications, business intelligence (BI) platforms, and enterprise software.…

1 month ago