close

Charts

Synonyms: flow chart, pie charts, bar chart, diagram

Every year new design hacks are being discovered, but nobody still came up with a better solution of visualizing complex (and sometimes boring) numbers then charts. Choosing an unsuitable chart type can cause lots of confusion for users or even provoke data misinterpretation. We will try to define the best ways of using this tool here to make your projects clean, structured and fresh.

 

But first of all, what is a chart? Basically, it is a representation of metrics, calculations and connections, created to help the user read and interpret all the statistical information.

Kinds Of

There are several kinds of charts:

 

  1. Relationship charts are showing how the stats are connected and the best instruments here are scatter chart, bubble chart and network diagram.
  2. Comparison charts are letting you analyze similar values by placing it in columns and lines.
  3. Composition charts can help to see different parts of one subject. This could be pie charts, though they are the most difficult to analyze, heat or tree map, stacked column or area charts.
  4. Distribution graphs are essential to illustrate the extremes compared to normal trends. Efficient tools here are scatter chart, histogram chart and bell curve.

 

Caption: Maya Koeva

Rules or Recommendations

However, before making any chart, you should ask yourself a question: do you actually need a chart here or is it possible to deliver all the necessary information just in numbers?

 

If you still need to visualize the figures, then it is recommended to use the following rules.

 

  1. Try to implement common charts in your design, such as area, bar or column, line and pie charts. This will let the user quickly read all the information and not to struggle trying to understand new outstanding design :)
  2. When using axes in charts, remember that time is always the axis X. This could be helpful with perceiving and analyzing diagrams either.
  3. Start your bar charts always at zero to make them properly proportional.
  4. Sort your bar or column charts from ascending to descending when it is possible.
  5. Long columns are better playing in horizontal bar charts, especially when you have lack of space.
  6. Use a pie chart with not more than 5 slices. Otherwise, you can get lost in all the lettering.
  7. You don’t need to include legend when it’s not essential. For example, if you have only one line in your graph then the user probably already has the explanation of what this line represents.
  8. Draw grid lines only when they are really useful.
  9. Think about responsiveness.
  10. Try to use contrast colors. Avoid using solid fill instead of a stroke for overlapping charts — this can ruin your clean design.

share the term