Designing for Charts

Applying basic design principles, Part 3: Details of chart display

Erica Gunn
Published in
9 min readFeb 1, 2020


This is the third in a series of articles that illustrate how basic design principles can improve information display. Previous articles focused on whitespace and establishing page hierarchy, and the next will discuss different considerations for choosing between chart types. Here, we’ll get into the details of how to optimize a chart display.

“Good information design works like a tour guide, telling the user what matters most and where to go from here.”

Every design system is the result of competition between different constraints. You may need to adhere to specific space constraints or charting libraries, support a particular kind of information, or satisfy a strong brand or aesthetic. A good design solution balances these competing influences to support a specific user task. For a chart, the primary task is analytical: a user must be able to read and understand the data. For this reason, data visualization design prioritizes quantitative accuracy and emphasizes clarity and legibility over other considerations. Let’s start with a typical default chart, and see how information design principles can make it better.

Chart shows 3-D stacked bar chart with gridlines and lots of axis labels.

1. Data is legible.

In order for a user to complete an analytical task, they must first be able to read and understand the data. This requires an appropriate use of scales and labels, and a clean and simple presentation that does not distort the data or create undue emphasis.

Information is clearly identified.
In order to understand a chart, a user must be able to easily identify the source of the information and what it means. Labels, legends and other indicators are critical to helping the user establish a sense of context for the information displayed.

This chart adds a legend and labels for all annotations shown on the chart (percentile lines)
  • All chart scales and axes should be clearly labeled, so that the user knows what they represent. At a minimum, axes must display a title and identify max and min values. For a bar chart, the y-axis should start at zero.