10 tips for human readable charts

Like you probably know, there are numerous types of charts to choose from in Vaadin Charts. But which one should I use in my application? Is a pie chart better than a bar chart? You have the tools, but you still need to know how to use them.

Here are a few simple guidelines you can follow:

  1. Decide what is the one primary purpose of the chart visualization. Is it a comparison with several values, a total sum, an average, a distribution or a change of quantitative variables. Pick only one and the chart type is easier to choose.

  2. Use pie charts to show parts of whole. Unless the parts don’t sum up, or you want to extensively compare parts, the pie is not the right choice and you should use for example bars or something else instead.

    People use multiple IDEs so a pie chart would not make any sense here.

    People use multiple IDEs so a pie chart would not make any sense.

  3. Use a line chart when you want users to find trends. When lines are used to display data, the reader can better focus on the pattern that they form.

    Response rate slows down over time.

    Response rate slows down over time.


  4. Bar charts are good for comparisons. Bars help people focus on the magnitudes of individual variables and allow easy comparison.

  5. Remember that it is easier for people to compare lengths than areas. This is why a bar chart still makes sense over many area-coded visualizations.

  6. Avoid vertical titles. They save space, but make it much harder to read.

  7. Use effects sparingly. Flat might be boring, but if the target is to understand the data instead of advertising it, simpler solutions are a safer choice. Avoid shadows and 3D effects unless your information is boring.

  8. Sort your data meaningfully. This is clear when using time based data, but whether you are using a pie, a bar or a line chart, order helps focus and comparison. What is the first thing you want people to read?  

    Clock wise sorting would be more intuitive.
    Clockwise sorting would be more intuitive.

  9. Combine charts side by side. Instead of using multiple series in one bar chart, put them into two bar charts next to each other and only use single labels. This is a good approach when searching causality between the series, rather than just comparing them.

  10. Use different gray levels and a single highlight color. Your palette is virtually infinite, and you can be creative, but avoid using too many colors. Two to five should be enough. Remember that not all people can see all the colors.

These only cover the most common chart types Vaadin Chart provides, but as you go further, you notice the same principles apply to more sophisticated chart types as well.

Want to know more? There is an in-depth webinar  on Vaadin Charts coming up next week. On next Thursday, Matti Tahvonen from Vaadin and Torstein Hønsi from HighSoft will explain how to use Vaadin Charts to create good-looking visualizations of data.

PS. or ‘one more thing’: We have covered PDF generation, printing and document management integration earlier. Take a look at how to fully benefit from vector-based charts.

“SamiSami Ekblad has been working at Vaadin Ltd since 2000. He has had various roles from Vaadin R&D to large-scale Java EE application development, project management and Vaadin community management. You can follow him on Twitter – @samiekblad