Updated: February 14, 2018

Chart – Semantic Patterns

Intro

This article explains how to use patterns like dashes, dots or hatches in order to distinguish:

  • Actual Values: What values are (solid pattern).
  • Projected Values: What values might be (dashed line, hatched areas).
  • Reference Values: What values should be (dotted line with empty circles, empty areas).

Actual Values

Actual values register facts that happened in the past and utilize the solid pattern for areas and lines, as illustrated below.

Line Chart with actual values
Line Chart with actual values
Column Chart with actual values
Column Chart with actual values

Projected Values

Projected values are estimates of what might happen in the future such as a forecast, estimation or prediction. They indicate what the actual values will be in the future, and the projection can be calculated by the system, extrapolated from previous time periods, or entered manually by a user.

Example:

  • Revenue forecast calculated from previous months.
  • Adjusted revenue forecast that has been manually adjusted based on the current context.
  • Cost for projects that are committed, but not yet delivered.

Dashed Line

Use dashed lines to show projected values as illustrated below.

Line chart with actual and forecast values
Line chart with actual and forecast values

A line can change from solid to dashed when the line needs to display actual values followed by projected values.  In the example below, the line connecting the last actual value (2015) to the first projected value (2016) is dashed to indicate that the line is a projection.

Line chart with actual values followed by forecast values
Line chart with actual values followed by forecast values

Hatched Area

Use the hatched pattern in columns and bars to display projected values, as illustrated below.

Column chart with actual and forecast values
Column chart with actual and forecast values
Stacked bar chart with actual and forecast values
Stacked bar chart with actual and forecast values

A series of columns with the solid pattern can be followed by a series of columns with the hatched pattern when a series displays actual values followed by projected values, as illustrated below.

Column chart with actual values followed by forecast values
Column chart with actual values followed by forecast values
Bullet chart with actual values followed by forecast values
Bullet chart with actual values followed by forecast values

Reference Values

Some values represent a reference for other values (such as a threshold that should be reached or should not be reached) depending on the use case.  Here are some examples:

  • A target revenue that must be reached.
  • An expense budget that should not be exceeded.
  • The share price of a competitor to use as a benchmark.
  • The number of new customers acquired last year that needs to be exceeded this year.

The bullet chart is the ideal chart to compare values with reference values. The reference value is displayed by the black horizontal lines as illustrated in the chart below.

Bullet chart with actual and target values
Bullet chart with actual and target values

Dotted Line and Empty Circle

Warning
Please note that the dotted lines are supported starting from SAPUI5 version 1.40 and higher only.

Reference values displayed as a line should use a dotted line and empty circles for the data points as illustrated below.

Line chart with actual and target values
Line chart with actual and target values

When there are many data points, the circles are automatically hidden, as illustrated below.

Line chart with plenty of actual and target values
Line chart with plenty of actual and target values

When the chart contains one actual value and one reference value (such as a target), you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and the first color from the Qualitative palette for the actual value, as illustrated below.

Colors used in a line chart with actual and target values
Colors used in a line chart with actual and target values

When the chart combines a single reference value (such as a target) with multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and colors from the qualitative palette for the actual values, as illustrated below.

Line chart with one single target value for multiple actual values
Line chart with one single target value for multiple actual values

When the chart contains multiple pairs of actual values and reference values, you should use a darker color for the reference value and a light color for the actual value with the same hue.

Colors for the Reference Values in the chart below:

  • sapUiChartPaletteSequentialHue1Dark1
  • sapUiChartPaletteSequentialHue2Dark1
  • sapUiChartPaletteSequentialHue3Dark1

Colors for the Actual Values in the chart below:

  • sapUiChartPaletteSequentialHue1Light1
  • sapUiChartPaletteSequentialHue2Light1
  • sapUiChartPaletteSequentialHue3Light1
Line chart with multiple pairs of actual and target values
Line chart with multiple pairs of actual and target values

When the reference values and the actual values do not have a direct relationship, you should use colors from the qualitative palette and all the lines should all have different colors, as illustrated below.

Line chart with multiple actual values and multiple target values
Line chart with multiple actual values and multiple target values

Empty Area

Please note that empty areas are not supported in version 1.38 of SAPUI5 and lower.

When columns or bars are used to display reference values such as a target, plan or budget you should use the empty pattern.  You should also use the color sapUiChartPaletteSequentialNeutralDark2 for the reference value and the first color from the qualitative palette for the actual value as illustrated below.

Column chart with actual values and target values
Column chart with actual values and target values

When the chart contains a reference value (like a target) for multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference value and colors from the qualitative palette for the actual values, as illustrated below.

Column chart with one single target value for multiple actual values
Column chart with one single target value for multiple actual values

When the chart contains multiple sets of linked actual values and reference values, you should use a darker color for the reference value and a light color for the actual value with the same hue.

Colors for the Reference Values in the chart below:

  • sapUiChartPaletteSequentialHue1Dark1
  • sapUiChartPaletteSequentialHue2Dark1
  • sapUiChartPaletteSequentialHue3Dark1

Colors for the Actual Values in the chart below:

  • sapUiChartPaletteSequentialHue1Light1
  • sapUiChartPaletteSequentialHue2Light1
  • sapUiChartPaletteSequentialHue3Light1
Column chart with multiple pairs of actual and target values
Column chart with multiple pairs of actual and target values

When multiple reference values and multiple actual values do not have a direct relationship, you should use colors from the qualitative palette.  Columns for the reference values and columns for the actual values should all have different colors, as illustrated below.

Column char with multiple actual vales and multiple target values
Column char with multiple actual vales and multiple target values

Resources

Elements and Controls

Implementation