Explore SAP Fiori

The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction.

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

An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.

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

A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.

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

This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.

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

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

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

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

The article explains how to use different charts to visualize the relationship between sets of numerical values.

Overview of the charts you can use to visualize how values are distributed within a set.

This article explains how to embed an SAP Fiori chart in an app to ensure the correct size and scrolling behavior.

The legend explains the meaning of all the visual elements in the chart.

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).

The range selector is a user interface control that enables the user to select a range of data points in a data set.

This article explains how to choose the correct chart for ranking items based on numeric values.

Add reference lines to highlight a particular value.

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.

The chart popover displays information or actions related to the selected data points.

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

A column chart uses rectangular bars to compare multiple values over time or across categories.

The comparison chart is a bar chart for comparing the top n entries in a list.

Use waterfall charts to analyze a cumulative value.

The delta micro chart helps to visualize a delta value (difference) between two main key figures.

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

You can use a Harvey Ball chart to visualize a value compared to its total.

The interactive chart is used for visual-based filtering in the visual filter bar within the analytical list page.

A line chart displays information as a series of data points connected by straight lines.

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.

The micro process flow visualizes the state of individual items in a workflow, and can be embedded in a list or a table.

The network graph displays a large amount of data by highlighting relationships between individual records.

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

You can use the radial micro chart to display a single percentage value.

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

The smart chart is a wrapper around existing chart types, which can be used together with all existing chart types within VizFrame.

The stacked bar micro chart can be used to visualize single values as part of a whole.

Treemaps display hierarchical data as a cluster of rectangles varying in size and color, depending on their data value.