Intro

This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.

By Category

We recommend using a bar chart to display a list of category items sorted by value (for example, a product ranking by revenue).

In the chart below, it is easy to:

  • Understand that the category items are sorted by values.
  • Identify the top-ranking countries and the lowest-ranking countries.
  • See that all the countries in the middle have values that are very close together.
Category items ranked by value
Category items ranked by value

If you’re also interested in seeing how the values are distributed among category items, you can display a reference line that indicates the median.

Category items ranked by value, with median
Category items ranked by value, with median

Bar Chart vs. Column Chart

It’s worth noting that you can use a column chart or a bar chart, but if the category is not time-based (or does not have an intrinsic order), we recommend using a bar chart. If you follow this advice, you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, which as well as making them hard to read, also often leads to truncation of text. See the example below with the truncated ‘Great Britain’ label.

Bar chart with nicely displayed labels
Bar chart with nicely displayed labels
Column chart with truncated labels at 45°
Column chart with truncated labels at 45°

Within a Hierarchy

You can rank items within groups of the hierarchy.

In the example below, the countries are ranked inside their respective continents which makes it easy to compare each continent and each country within each continent.

Ranked groups inside a hierachy
Ranked groups inside a hierachy

Flat Hierarchy

When the hierarchy does not contain many items, you can flatten it and use color to identify the first level of the hierarchy.

In the chart below, you can immediately grasp which top 3 countries have the highest values and that America has the smallest values.

Ranked items in a flat hierachy
Ranked items in a flat hierachy

The chart below is used in the Cash Management app and displays the liquidity forecast by outcome and income. Displaying the outcome and income seperately helps to identify which income and outcome are the biggest.

Positive and negative items ranked separately
Positive and negative items ranked separately

Ranking and Parts to Whole

If you want to know which items have the biggest values and how much of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule (that is, 20% of the items contribute to 80% of the total).

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Pareto chart
Pareto chart

Resources

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

Elements and Controls

Implementation