Intro

Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.

Column chart with a time category
Column chart with a time category
Column chart with a category that has an intrinsic order
Column chart with a category that has an intrinsic order

Column Chart vs. Bar Chart

Use a column chart if:

  • Category items represent a time series. The natural orientation for time is from left to right.
  • Category items have an intrinsic order.

Use a bar chart if:

  • Category items do not have an intrinsic order (such as products, projects, or countries).

If you use a column chart for categories that do not have an intrinsic order, there is a high probability that the labels will be displayed at 45°, forcing truncation and making them hard to read. However, this will not happen with a bar chart, as illustrated below.

Do
Bar chart with labels displayed correctly - Categories that do not have an intrinsic order
Bar chart with labels displayed correctly - Categories that do not have an intrinsic order
Don't
Column chart with labels at 45° - Categories that do not have an intrinsic order
Column chart with labels at 45° - Categories that do not have an intrinsic order

Time Axis

If the horizontal axis represents time, you can use the time axis.

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.

Labels

When space is limited, the labels are displayed at 45°, making them difficult to read. Here’s how to avoid this:

  • First, check that the category has an intrinsic order. If not, consider using a bar chart instead.
  • If the category is time-based, use a time axis.
  • If it is not possible to use a time axis, the only solution is to abbreviate the labels.

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

No links.