Chart card displays a preview and key information of the full screen chart. Users can tap to navigate to the full interactive card view.
- Use the chart card if you want to provide users with an entry point to the full chart view.
- Do not use the chart card to navigate to other content types unrelated to the full chart view.
The header prominently displays the card title, value label, and timestamp.
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.
The header is located at the beginning of the card. The following content types are found in the header section:
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.
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:
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:
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.
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.
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