A humble line chart is a powerful tool when it comes to connecting humans with AI and receiving information and insights from our robot overlords. Building on solid foundations laid by Edward Tufte and Stephen Few and adding the latest in interaction and anomaly detection patterns, this article aims to provide a definitive guide for designers to make the most of line graphs in the age of AI while avoiding common pitfalls. While this article is somewhat lengthy (how else could we make a definitive guide!), the content is focused on visuals and real-world examples, so hopefully, it will be easy to read and understand.

Dos

1. Take care of the basics

Before we dive into advanced techniques, it pays to cover the basics. The guideline from Stephen Few and Edward Tufte is to use “natural” colors like those of slate pebbles for your lines and light grays for the axis. Always label your axis with units. If there is more than one chart shown, provide a legend (NOTE: the legend is unnecessary if there is only a single graph.) Give your graph a descriptive name so your customers can search for it, and AI tools can auto-suggest it more easily whenever your customers are doing relevant tasks. Here’s a nice example from Google Finance:

Notice how many of the graphs you see when you google “line graph” actually violate the basics!

2. Emphasize Correlation

Trend is going to be the most important part of a line chart. Thus whenever possible, show the graph in context with other information laid out in a manner that makes it easy to “connect the dots” to help customers understand the larger picture and implications of what is happening. One simple way of doing it is to stack the graphs to show relevant events together. A great example of this is the stock price. Price is typically shown in context with trading volume to help traders understand the significance of the move in stock price, as in this example from Etrade:

Here’s another example of a correlation courtesy of Dynatrace. Even though there are over 30 lines in a single graph, you can still see them as distinct data points. Although this is overkill for most applications (as we’ll discuss in later editions), in this case, it works well to see related issues together:

In this example from DataDog, it is easy to see why the system marked these events as related:

However, it will not always be possible to stack all of the graphs vertically. In this case, it pays to drop a timeline.

3. Drop a timeline

Whenever multiple line charts are presented side by side and visual correlation is difficult, or other types of charts are used in conjunction with the line graph (like a dashboard, for example), it’s a good idea to “drop a timeline” that indicates a line on mouse over to help customers more easily trace related events. Here again, is Dynatrace showing a vertical line mouse over to help tie multiple graphs together visually:

Here’s another nice example from Obkio:

The one disadvantage of this technique is that it’s more difficult to use it on pure touch screens like tablets and mobile phones. Another issue with the mouse-over lines is that the line will immediately shift if any scrolling is required. This is a significant issue whenever you are trying to see if something in the graph has happened at the same time on two different graphs, and one of the graphs is below the fold. If you anticipate this issue in your interface, be sure to provide a way to “pin” a vertical event line so that it stays put regardless of scrolling. This is a very handy design pattern to keep in mind. 

4. Mark Significant Events in the Line Graph

Another way to improve correlation is to mark relevant events on the graph whenever it is feasible to do so. You can use vertical lines, flags, triangles, etc. Allow your customers to mouse over or click to see an overlay with more information. This is also a great way to allow people to add notes for significant events right on the graph itself if that is feasible for your application.

Here’s another nice example of event markers from Google Finance that shows the events in a separate table below:

Here’s another example from DataDog where events are shown as vertical lines dropped on the line chart, and error logs are indicated as a heatmap above the green graph:

Whatever way you choose to indicate events on your line chart, they are an undeniably useful addition to help create a powerful way to make sense of complex, intertwingled (thanks, Peter Morville!) environments.

5. Consider Sparklines

Sparklines are “word-sized data graphics” invented by Edward Tufte. They present a special adaptation of a line graph that emphasizes the trend more than a specific data point. Because of that, the best sparklines also indicate the normal band and place the final (current) value at the end of the sparkline. A normal band is one of the best additions to a sparkline display because it helps the customer judge at a glance if the behavior is anomalous or routine. (See more on this in the next edition in the “Don’t” section.)

To learn more about sparklines, go to the source.

6. Consider a zoom bar

One nice addition to a line graph is the ability to zoom into a section of the graph. Often you can just click and drag on the graph itself to zoom, but often it can be advantageous to add a dedicated “zoom bar” in a special smaller graph immediately below the main graph. This feature was introduced by Google about a decade ago and became popular to support a variety of applications like stock trading. This dedicated “zoom bar” can be handy, but keep in mind that it takes up more screen real estate and adds an additional cognitive load, so use it sparingly, reserving the zoom bar for occasions whenever there is only a single main “hero” graph that forms the focus of the page. Here’s an example from ZingChart that includes an interactive playground page where you can try it out:

7. Design Next Steps and Navigation in Context

No graph is an island! You need to figure out what happens after the user sees the graph. Do they zoom in? See the detail of a particular data point? Add a note? Pivot to another view entirely? Do they need to carry the time of interest into the next action? As a UX for AI designer,  you need to look at the entire flow end to end to consider what the entire flow looks like for your customers. Here’s a nice example from DataDog that brings together many of the design patterns and considerations in this article. Note the color scheme, name, axis labels, legend, correlation, zoom bar, and next actions:

To be continued…

Greg & Daria