Intro

A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.

Line chart with time axis

Usage

Use the line chart if:

• You want to display trends over time, where the focus is on the trend, not on the individual values.
• You want to help users see dependencies between two or more variables.
• You want to show higher and lower values (like prices or workloads).

Do not use the line chart if:

• The y axis has a set of distinct (not successive) categories (not a timeline). In this case, use a bar chart, or a line chart with separate horizontal lines.

Color Palette

By default, the line chart automatically uses colors from the qualitative palette. However, you can also customize the colors (for example, if you want to differentiate between categories).

Line chart using the qualitative palette

Selection and Popover

When the user clicks on a data point in the line chart, the associated value is displayed in the popover. The popover can also be customized to display other information and actions.

Popover is displayed when you select a data point

Axes

Line charts can be used with 3 types of axes:

• Time axis
• Categorical axis
• Dual axis

Using the Time Axis

If the horizontal axis represents time and you want to show the variation of values over time, you can use the time axis.

It can display years, quarters, months, weeks, days, hours, minutes, and seconds.

The time axis has three main advantages:

• It allows you to display dates and times in a responsive manner.
• All the complexity involved with formatting the axis labels is automatically taken care of.
• The physical spacing between the data points accurately represents the time scale, as opposed to being equidistant.

If you do not need the advantages offered by the time axis, you can use a horizontal categorical axis instead.

Line chart with time axis

Choosing the Corrects Axis

For certain chart types, the physical spacing between your data points accurately reflects the time scale being displayed, as opposed to just rendering all your data points equidistantly. We can see what a difference this makes by comparing the charts below. The chart on the left uses the categorical axis, and the chart on the right uses the time axis. Even though both charts were generated from exactly the same dataset, the high concentration of early data points means they tell completely different stories about how the values have increased over time.

Customization

Managing Null or Missing Values in a Line Chart

If you expect to have null values or missing values in your dataset, you can connect the available data points, or show a clear break between them.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.