Intro

The line chart represents data points using dots connected by lines to shows peaks and falls of the data set. This chart type is useful for showing changes in values (continuous or discrete) over time.

Usage

Do’s

  • Use line chart to display a trend in the data, because the connections between the data points provides an overall shape to the dataset.

Don’ts

  • Don’t use when the dataset is missing several values, because breaks will appear in the line; use a column chart instead.

Structure

The line chart consists of the configuration bar, title section, summary section and chart plot. The line chart will be unselected by default and the summary section will display an aggregate or average of the data set.

A. Configuration Bar

The configuration bar provides users an overview of the data set range.

B. Chart Title

The chart title displays the name and an optional timestamp.

C. Chart Summary

The chart summary displays an aggregate or average of the data set as well as individual data set selections.

D. Chart Plot

The chart plot displays the chart x and y-axes as well as the visual representation of the data points — In this instance, the line chart.


Configuration Bar

The configuration bar displays a range of data, lets users navigate between data sets, and allows users to filter the data set. The following content types are found in the configuration bar:

A. Data Range Title

The data range title communicates the scope of the data points that are rendered within the chart plot area. Tapping on the tinted data range label push navigates to the “Data Settings” screen where users can control the scope of the data range.

B. Chevron Navigation

The chevron navigation allows users to navigate between data sets. To navigate backwards, the user taps (<). To navigate forwards the user taps (>).

C. Filter 

The filter lets users further refine the data points within the chart plot area. Tapping on the filter icon activates the filter menu that displays all filter controls for the user to make their own selections.


Chart Title

The chart title displays the name of the chart and an optional timestamp for the chart data. By default, the chart summary provides high-level details from the chart data – for instance, total sales in dollars ($) for the year. The following content types are found in the configuration section:

A. Title

The chart title should reflect the quantitative (measure) and categorical (dimension) criteria data being displayed with the chart — for example, “Total Sales ($) by Month”. The chart title update when the user changes the options in the filter menu and when the user drills into/out of the chart plot.

B. Time Stamp

Time stamp label can be included to indicate the last time the chart was updated.


Chart Summary

The chart summary contains summary information for the chart data series. Charts can display up to four data series at one time; if the data set contains more than four series, the user should be able to select which series to display using the filter menu.

A. Summary Title

The summary title should be concise yet descriptive, including the unit(s) of measure if applicable (for example, $, °C, and so on). When users drill into their data, the summary name acts as a visual reference to reinforce the user’s location within the data set. For example, if a user drills down from a 12-month view for 2018 to explore data for April, the summary section title would change from “YTD ($)” to “April Total ($)”.

B. Legend Item

The legend item consists of colored nodes and text that explains the meaning of the data points found in the chart plot. When there are two or more series, the legend items vertically stack from most recent to least recent.

C. Data Summary

The data summary displays the average value by default. When a data point is selected, then its values will display to the right of the average values. If a range is selected, the summary will display the values for that range.

D. Trend

The trend is identified by an up/down icon, text, and the use of semantic colors that is displayed next to the summary value as the user selects a range.



Chart Plot

This contains the visual representation of the chart data, including the chart items (e.g. Lines, columns, bars, etc.), x and y axes, title, labels, and gridlines. Users can select data points by tapping on the chart plot area and they can horizontally scroll to view more of the data set. The chart plot should always include the following:

A. Y-axis Title

The y-axis title is placed at the top of the chart plot and is left-aligned with the y-labels. The title should be clear and concise.

B. Grid Lines

The grid lines refers to the horizontal lines that run across the width of the chart plot area and are used to indicate the y-position of a data set. There are two types of grid lines, the base line (the minimum value in a data set) and the standard line (any value above or below the baseline). Both lines types are distinguished by their visual treatment, baselines are solid and standard lines are dotted.

C. Ruler

The ruler is a vertical axis that appears when the user makes a selection on the chart plot in order to better illustrate a point’s x and y location.

D. X-axis Title

The x-axis title is placed at the bottom of the chart plot and is center-aligned with the device screen. The title should be clear and concise.


Behavior & Interactions

The line chart allows user to select a single point or a range of points by tapping and dragging.


Single-selection

When the user selects an item in the chart plot, the ruler appears to indicate the selections’ position on the x-axis. To reposition ruler, the user drags accordingly to move to another point.




Multi-selection

Users can select a data range by tapping and holding with one finger and subsequently tapping another point on the chart plot. Users can also perform this interaction by tapping on the chart plot with both fingers at the same time. While holding the position, users can adjust the data range by sliding their fingers across the chart plot. Doing so, the data will update on the summary section in response to the user’s input.