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.

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.

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.

Hatched Area

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

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.

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.

Dotted Line and Empty Circle

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

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

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.

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.

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.

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.

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.

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.

Resources