Charts (VizFrame) – Foundations

Decorative header background image
Foundations / Best Practices / UI Elements / Charts (VizFrame) – Foundations

Chart Types

Chart Types

Get an overview of the chart types.

Choosing the Correct Chart Type

Decide which chart to use.

Colors and Patterns

Chart Color Palettes

Find out how to use the qualitative, sequential, and semantic color palettes for chart visualization.

Values and Names

Look up the color names and hex values for the chart color palettes.

Semantic Patterns

Use patterns to distinguish actual, projected, and reference values.

Interactions

Embedding

Embed charts with the correct size and scrolling behavior.

Gestures

Discover the gestures available in charts.

Popover

Display information related to the selected data points in a chart.

Selection

Outlines the options for selecting items or data points in a chart.

Chart Toolbar

Learn about the possible actions in the chart toolbar.

Zoom

Change the scale of an axis on a chart.

Additional Requirements

Number and Time Format

Use SAPUI5 formatters for numbers, dates, and times to match the user's locale settings.

Advanced Features

Legend

Explain the meaning of the visual chart elements.

Value-Based Legend

Use color shades to show value ranges in heatmaps and treemaps.

Reference Lines

Add reference lines to highlight certain values.

Size of the Chart Container

Auto-adjust the height of a chart in a chart container.

Time Axis

Show a series of values over time (such as years, months, weeks, or days).

Value Display

Display and customize value labels for data points.

Range Selector

Let users select a range of data points in a dataset.