Explore SAP Fiori

Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.

The bullet chart is used to compare primary and secondary (comparison) values.

This article provides guidelines for using color to indicate primary values in bullet charts.

This article explains how to visualize the deviation (difference or variance) between two measures.

This article illustrates the different ways you can visualize changes of measures through time.

This page provides all the color names in the chart palettes.

This article explains the three chart visualization color palettes and how you can leverage their unique properties.

This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.

This article explains how numbers and time information can be configured to users’ local settings.

This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).

This article describes the different ways users can select one or more data points.

The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).

This article describes how value labels are displayed and how you can customize them.

The value-based legend is used to visually represent value ranges through color shades.

The zoom function enables users to change the scale of an axis on a chart.

You can use the VizFrame control to display different types of chart that are both interactive and responsive.

Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age or ratings).

The Gantt chart shows the sequence in which various activities occur and the dependencies between these activities.

A map is a symbolic visual illustration of areas, regions, and themes. Maps can be analytical or geographic.

Micro charts help you visualize a small number of data points, and can be embedded in other controls.

You can use the process flow control to represent the stages in a business process (such as approval).

Add reference lines to highlight a particular value.

The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.