Small Charts

Shrinking a chart with many components can cause the scale or individual components to be lost. If small charts need to be used consider using sparklines – purposefully small charts where the compromise on size is well understood.

<C34 image – do and dont>

Large Charts

When designing a dashboard consider the size of the chart relative to other objects on the screen. If the chart dominates the dashboard users will feel that that metric is more important than others on the page. Scale your charts to convey importance.

<C35 image – do and dont>

Use Light colors for non-data Components

Non-data components of charts should be visually pushed to the background so that they do not distract the user from the data. The colors used should be light and the weight or thickness should be light as well.

Use gridlines to sparingly

Gridlines are often overused or over-emphasized in visualizations. However, there are times they are useful to use. Use gridlines when:

Measure small differences

You want to enable a user to measure small differences when data points are not ranked. Gridlines help to guide the across the axis and enable a more accurate comparison.

<C36 insert image – column chart by date – no lines, column chart lines – make sure columns are uneven and do not look like a trend or a ranked>

Simplify interpretation 

For charts that have a large number of data points, a gridline helps the user traverse the chart and interpret the data correctly.

<C37 insert image – show time-series line – no gridlines, time-series grid line – make sure 12 + months of data>

Enable users to focus on an area

This is generally used for scatter plots where users are comparing two numeric axis. Gridlines help to associate values on both axis simultaneously. 

<C38 insert image – scatter plot no grid, scatter plot grid>

When using gridlines only use them for numeric axis and use a light color so as to not distract the user from the data.

<C39 Insert image – bad heavy gridlines x and y, light gridlines numeric>

Minimise Use of Labels

Labels are rarely needed in a visualization. The charts axis performers the function. Use labels only in cases where no axis is displayed such as pie charts.

<C40 insert image – bar chart labels, bar chart none>

Avoid Background Images

Background images clutter a chart and make it harder for a user to focus on the numbers. 

<C41 insert bad background image versus none>

The exception to this rule is when the background image adds meaning – this could be in the form of a map for a scatter plot or an image of a heat map of a vehicle highlighting where damage occurs.

<C42 insert image map and car>

Avoid 3D Charts

3D charts do not add any additional analytic insights. They are heavy and draw the users attention away from what is important and can even obscure the results of a visualization. 

<C43 IMAGE 3d bar versus bar>

Avoid using 3D charts, unless they serve a visual purpose and are interactive such as a body heat map which a user could rotate to see injury sites.

<insert video – human body image>

Avoid Drop Shadows

Drop shadows for the chart components or plot should not be used. They do distract and draw attention away from the data. 

<C44 insert image drop shadow on bars, no shadow>

Drop shadows can be used very lightly for the entire visualization when being added to a dashboard. This can help to make the visualization stand out from the page.

< C45 insert image chart on dashboard with drop shadow>

Avoid Rounded Edges

Rounded edges on bar and column charts are best avoided. Apart from adding no additional value in terms of analysis, they can obscure results by making the actual values harder to interpret.

<C47 image rounded versus hard>

Avoid Animation

Similar to 3D effects chart animation has been seen as adding value to the analytical experience. It does not. Avoid animations and focus instead on charts load speeds. End users do not want to have to wait additional milliseconds watching their chart animate on load – they want to understand what the data tells them. 

<C48 Insert Image – Animated gif versus Instant Load>

Reduce Categorical Items

Reduce the number of values presented in a bar chart. Either filter for top 10 (n) or bottom 10 (n) if ranking is important. This is useful when your users want to understand the best or worst-ranked items.

<C49 Insert bar chart lots, Bar Chart few>

Benchmark to average

If benchmarking a value to total is important then compare the value to the average. For example, if you want to understand how a single store compares to all other stores create a visualization that compares it to the Average or Top 5 Stores and Bottom 5 Stores.  

<C50 Insert bar chart lots of values, versus compare to Average>

Use multiple series sparingly

The use of multiple series (metrics) in a single chart should be used sparingly. Only use when you are doing comparative analysis or looking for correlations. At most two series can be combined. Any more and the chart becomes cluttered and difficult to comprehend, even with dual axis.

<C51 Insert image multiple series versus 2>

Reduce color in Line, Stacked Bars and Pies

Displaying too many color series in a time series analysis or stacked bars makes analysis difficult. With stacked bars and pies 3 colors should be the maximum. With line charts up to 5 is OK.

Consider using two or more visualizations instead of too many color series.

<C52 Insert image bad and good line charts and stacked bars>