Visual Design Basics

Designing Simple Charts and Diagrams

How to show relationships clearly with minimal marks and honest labeling, including choosing a chart type, simplifying, and avoiding misleading choices.

On this page
  1. Start with the message
  2. Match the form to the relationship
  3. Use minimal marks
  4. Label honestly and directly
  5. Keep the scale honest
  6. Diagrams: show structure, not decoration
  7. Accessibility and context
  8. Final check

Start with the message

A chart or diagram earns its place by showing something that words alone make tedious. Before opening any tool, write the point in one sentence: “Most of the cost is in two categories,” or “The process has four steps and the third often causes delays.” That sentence guides every later decision. If you cannot write it, you may not have a chart yet, only data.

Also note who will read it and where. A diagram in a long article can carry more detail than one on a phone screen or a slide.

Match the form to the relationship

Different relationships suit different shapes. These are common pairings:

What you want to show Usually works well
Compare amounts between categories Bar chart
Change over time Line chart
Parts of a whole (few parts) A single stacked bar, or a simple pie with few slices
How two measures relate Scatter plot
Steps in a process Flowchart
Parts and how they connect Box-and-line diagram
Ranking Sorted bar chart

Bar charts are the dependable default for comparison, since people judge lengths along a common baseline quite accurately. Pie charts get used often and criticized often; they can work with two to four slices, but become hard to read with many. Treat these pairings as typical suggestions, not strict rules.

Use minimal marks

Every line, color, label and decoration on a chart should do work. A helpful habit is to remove things one at a time and ask whether the message becomes unclear. If not, leave them out.

  • Remove heavy gridlines. Light, sparse lines are enough, or none when values are labeled directly.
  • Drop 3D effects and shadows. They distort proportions and add nothing.
  • Skip decorative backgrounds. Plain space is easier to read.
  • Use color purposefully. Keep most marks neutral and use one strong color for the thing the reader should notice.
  • Limit categories. If there are many, group the small ones, or show only the top few and note what was left out.

This follows from the idea of contrast in the overview of design principles: the one important item stands out because everything else is quiet. It also supports a clear visual hierarchy, since the title, the key mark and the labels each have an obvious order.

Label honestly and directly

Labels are where a chart can quietly mislead or quietly help.

  1. Write a title that states the finding or the subject. “Monthly visitors, January to June” describes; “Visitors doubled after launch” argues. Use the second only if the data supports it.
  2. Label axes and units. Say whether numbers are counts, percentages or currency, and over what period.
  3. Label directly where possible. Put the name of a line at the end of that line instead of sending the reader to a legend.
  4. Name the source. State where the data comes from and when it was gathered.
  5. Note any limits. If the sample is small or values are estimates, say so briefly.

Keep the scale honest

A few choices can change how a chart feels without changing the data.

  • Start bar charts at zero. Bars encode value by length, and cutting off the base exaggerates differences. Line charts have more flexibility, but be clear if the axis does not start at zero.
  • Use consistent intervals. An axis that skips or squeezes sections without saying so can mislead.
  • Compare like with like. Keep scales the same across charts that sit side by side.
  • Do not imply a trend from too little data. Two points make a line, but not a pattern.

Honest design builds trust. If a version looks more dramatic only because of a scale choice, prefer the calmer version.

Diagrams: show structure, not decoration

For processes and relationships, a few habits help:

  • Choose one direction of flow, usually left to right or top to bottom.
  • Use one shape for one kind of thing, such as rectangles for steps and diamonds for decisions, and explain any code you use.
  • Keep lines straight and avoid crossing them where possible.
  • Align boxes and space them evenly. A simple grid, as described in the article on layout and grids, makes diagrams easier to scan.
  • Put short labels inside boxes and use verbs for steps.

A hypothetical example: a four-step publishing process. Draw four equal boxes in a row, label them “Draft,” “Review,” “Edit” and “Publish,” and connect them with arrows. If review often sends work back to drafting, add a single return arrow, not four. Resist adding every exception.

Accessibility and context

Do not rely on color alone to separate series. Use direct labels, patterns or different line styles, and keep in mind color blindness when choosing pairs. Provide alternative text that states the main takeaway, and where precision matters, include the underlying numbers in a small table nearby. Text in charts should be large enough to read on a phone.

Charts that explore data at a larger scale are a field of their own, discussed in the wider topic of data visualization. For everyday content, simplicity is usually the better goal.

Final check

Show your chart to someone for five seconds, then ask what they took from it. If they name your message, the design is working. If not, remove something or clarify a label and try again.

The complete guide to visual design basics

Visual Design Basics for Non-Designers
Read the guide

Keep exploring

Guides from other topics

All topics →