Updated: June 10, 2019

Chart

Intro

The chart floorplan displays data using a full-width chart. In this floorplan, users can select chart items to see specific values, drill in to explore more details, and adjust a variety of chart criteria using filter options.

Structure

A. Chart Title

The chart title should display the name of the chart, the name(s) of the series displayed, and an optional timestamp for the chart data.

B. Chart Summary

By default, the chart summary provides high-level details from the chart data – for instance, total sales in dollars ($) for the year. When the user taps on an item in the chart plot, details for that item will also appear in this section.

C. Chart Plot

This contains the visual representation of the chart data, including the chart items (for example, bars, columns, lines, and so on), x- and y-axes with titles, and axis labels and gridlines.

D. Legend

The legend describes which colors relate to which data series in the chart plot. For charts with only one series, the legend is not displayed.

Additional Component Details

Chart Title

A. The chart title should reflect the quantitative (measure) and categorical (dimension) criteria data being displayed with the chart — for example, “Total Sales ($) by Month.”

Please be sure to set the chart title to update when the user changes the options in the filter menu and when the user drills into/out of the chart plot.

B. The subtitle line should indicate the series currently being displayed in the chart – for example, “2016-2017.”

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

Chart Summary

This component displays 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. The summary name 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. When only one series is included, the sereis label will not be displayed. However, when there are two or more series they will be displayed and should be sorted in descending order from most recent to least recent where applicable.

C. In the default view the average value will be displayed. When a data point has been selected, then its values will also be displayed to the right of the average values.

D. When there are two series, the up/down trend icons and label can be displayed. These should take semantic colors. When including a trend, make sure that it uses the same number of decimals as the summary values above.

E. You can drill in to additional information on a category of the chart by tapping on the selected value label. If there is no drill down, the label should not be in tint color.

Chart Plot

 The chart plot should always include the:

A. y-axis title

B. x-axis title

You can select the number of gridlines to be displayed, but try to follow these guidelines:

  • For column and line charts, there should be a minimum of two y-axis gridlines with labels: a baseline and a line above the max value. If the chart data extends below the baseline (for example, into negative values), there should also be a minimum y-axis gridline with a label.
  • For horizontal bar charts, there are currently two x-axis gridlines with labels: a baseline and a single gridline.

Behavior & Interaction

General

Selection

To select an item in the chart plot, the user either taps that item directly or taps and slides his/her finger onto it to make it active.

Filter

The filter action allows the user to change the dimensions of the chart and adjust sorting.

Drill down

When a chart item is selected, its data values appear in the chart summary section. Drill down is supported in the chart summary section, and you get to choose how the chart view is displayed on drill down. When possible, the measure (quantitative variable) should remain consistent during drill down.

Interactions for Horizontal Bar Charts

Expanded Y-Axis Labels

Y-axis labels automatically expand to accommodate longer label text (up to a certain width), after which point they are truncated. If truncation occurs, users can reveal more of the y-axis labels by double-tapping to expand them. Double-tapping them again will return them to their default width.

Overflow

When there are more data rows than can fit on-screen at one time, the additional rows flow beneath the x-axis gridline and are accessed by vertically scrolling the chart plot.