Intro

Chart card displays a preview and key information of the full screen chart. Users can tap to navigate to the full interactive card view.

Usage

Do

  • Use the chart card if you want to provide users with an entry point to the full chart view.

Don’t

  • Do not use the chart card to navigate to other content types unrelated to the full chart view.

Structure

The chart card includes all of the following content. The content shown may vary depending on what is being previewed from the chart overview.

A. Header

The header prominently displays the card title, value label, and timestamp.

B. Legend

The legend provides an explanation about the data in the chart plot.

C. Chart Plot Preview

The chart plot preview displays a minimized view of the data from the full chart view.


Header

The header is located at the beginning of the card. The following content types are found in the header section:

A. Title

The title should provide a concise summary of the chart’s data.

B. Time Stamp

The timestamp indicates the chart card’s latest update. For timestamps, we recommend using the appropriate time unit abbreviation (e.g. hours “h”, days “d”, months “m”) to reduce screen real estate usage in order to communicate time.

C. Value Label

Displays the aggregate, averages, or a selected data point from the data. For value label, app teams can choose between several symbol units (e.g. Euros “€”, Thousands “K”, degrees Celsius “°C”) that may be placed left and/or right of the label value.

D. Trend Label

The trend label signals the upward or downward trend of a data set by using semantic colors found in the Firori color style guide. Because of localization, we allow app teams to choose the appropriate semantic color to comply with their cultural and/or regional needs. Refer to the Fiori colors style guide for more information regarding semantic colors.


Legend

The legend is located below the header section and consists of legend items that can wrap up to two lines. The following provides more detail about the legend item:

Legend Item

The color-nodes and labels are used to easily identify the data points in the chart plot. Legend items can extend to the margins of the card in which case the label would truncate. Subsequent legend items can wrap to a second line.


Chart Plot Preview

The chat plot preview is located at the bottom of the card and its height is adjusts according to the header and legend height. The following elements make up the chart plot preview:

A. Y-axis

The y-axis often represents a dependent variable or range from the smallest to largest values used to measure the dependent variable. Up to a maximum of three y-labels may be displayed in chart plot preview.

B. X-axis

The x-axis represents an independent variable (e.g. time, temperature, location, type of tractor, etc). Up to a maximum of twelve variables may be displayed in the chart plot preview.

C. Chart Plot

The chart plot should show the most accurate, relevant, and reliable data in order to inform the user’s decision making. The chart plot can display line, column, or horizontal bar chart data.



Layout

There are two card layouts, base card and card collection view. The use case will determine which card mode to use.

Base Card View

The base card view displays cards in a vertically scrolling card stack (mobile) or grid view (tablet). Use this view if the user is drilling down from the card collection view or as a standalone dashboard page.




Card Collection View

The card collection view is a horizontally scrollable array of inline aligned cards. Place this view within an overview page or detail page as an entry point to a detail page or to a base card view.

Behavior & Interactions

The chart card serves as the entry point to help users navigate to the full-screen chart. When tapped, the card should display a ripple effect as a visual indication that the card has been tapped

Mobile & Tablet



Mobile displays a single column vertically stacked layout meanwhile the tablet displays two or three column grid layout.

Mobile & Tablet
Mobile & Tablet

Specs

Header



Legend



Chart Plot



Card



Card

Sample Element Alpha Hex
Background Color #FFFFFF


Header

Sample Element Alpha Hex
Title #32363A
Value Label #32363A
Timestamp #6A6D70


Trend

Sample Element Alpha Hex
Semantic 1 #BB0000
Semantic 2 #107E3E


Legend

Sample Element Alpha Hex
Label #6A6D70


Chart Plot

Sample Element Alpha Hex
Y-axis Label #6A6D70
X-axis Label #6A6D70
Baseline #CCCCCC
Gridlines #CCCCCC


Chart Colors

Sample Element Alpha Hex
Hue 1 #5899DA
Hue 2 #E8743B
Hue 3 #19A979
Hue 4 #ED4A7B
Hue 5 #945ECF
Hue 6 #13A4B4
Hue 7 #525DF4
Hue 8 #BF399E
Hue 9 #6C8893
Hue 10 #EE6868
Hue 11 #2F6497