Line Graphs Design Only
Line graphs display data points connected by a line. They may include a single line to represent one category within the data set or multiple lines to represent more than one category. They are best used to illustrate patterns or trends over time.
Line Charts
Line charts are excellent at showing the relationship of multiple values and how they change over time (or in relation to another value).
When to Use
- When users need to easily spot trends.
- When you need to illustrate or examine how something changes over time.
When Not to Use
- When there are a large number of categories to examine. Line charts are more comprehensible with fewer lines.
Variations
- Line Chart (shown above)
- Ghosted Line Chart
- Sparklines
Usage
Behaviors
Line charts have several interactions available for accessing additional details. All of these functions are optional.
- Drill Down View: On click of a single data point, users can drill down to the next level of information. If there are no further steps in the hierarchy, detailed information should be displayed in a popover or tooltip.
- On click/hover of the background of the visualization, a popover displays values for all the data points at that position on the chart.
- Additional Toolbar Options: additional functionality such as drawing, adding baselines, notations, etc. may be added. These are most commonly accessed from the Toolbar.
Combining Line Charts with Other Charts
Line charts can be layered on top of other charts (such as bar charts), but this should be done sparingly. Adding line charts to other charts can make it very hard for the user to know what to look at.
Variations
Ghosted Line Chart
A Ghosted Line Chart highlights a single line on hover or tap. It allows multiple lines to be shown at once without losing comprehensibility.
When to Use
- When there are a large number of trends to examine at once for possible correlation.
When Not to Use
- When you need to be able to clearly see what each line represents. Unless highlighted, the “ghosted” lines will not be labeled.
Sparklines
A sparkline is a small, unlabeled line chart that can be added to indicate how a metric has changed over time. A single baseline or time range highlight may be added, but only if the meaning of it is obvious without a label (to indicate a year change for example).
When To Use
- When the meaning of the line is well-understood by users and/or a quick snapshot of a trend over time is valuable (for example, in a KPI bar)