Avoid overlapping chart data labels

Introduction

Open

Since version 21.1.2, CXO can automatically position the data labels in charts in a way that labels are not overlapping each other, thus improving the readability of your reports.

Open

When deciding how to reposition labels several aspects have to be taken into account:

• Space for the chart is limited (i.e., chart does not grow)

• Labels should not be overlapping

• Labels should be relatable to the data point for the end-user (i.e., distant or unstructured labels bring a risk of misunderstanding them)

• Labels should be visible on the chart (i.e., labels cannot fall out of chart or be cut off)

• Repositioning should not significantly impact performance

• Repositioning should happen automatically (i.e., the user does not have to manually drag the labels like it’s done in PowerPoint) so that the chart looks always the same for all users and same in exported reports.

Some of these aspects contradict each other, so we have to look for the right balance between all of them.

Supported use cases

Overlaps between the data labels are avoided only for

1. Chart has a horizontal orientation, one where values axes are on the left or right

   • On vertical charts, avoiding labels would cause labels to be too far away from the data point.

2. Between labels belonging to the same category

   • Otherwise, if all categories are taken into account, the complexity increases exponentially without necessarily giving better visual results.

3. Labels belong to a line series, since those are always shown in one vertical line

   • Bridge or Bar series labels have a smaller chance of overlapping since the bars are shown next to each other.

   • Any line style is supported: line, spline, step line, scatter.

Approach

If there is an overlap between labels that fulfill all three conditions, then the chart will automatically reposition the labels by moving them strictly up or down. Repositioning works for any number of series.
When repositioning to get visually the best result, the chart tries to minimize:

• The chance of shrinking to fit the labels that fall outside of the chart

• Number of labels that are moved from their default position (above the line series).

• Total distance of data labels from the data point

Repositioning for each category happens independently of other categories. That means that for one category labels might be pushed downwards, and for another one upwards.

Repositioning works also if more then 2 labels from the same category all overlap each other (see example with September). In other words, repositioning works if there are many line series in the chart.

Example chart with 3 series

Without avoiding overlapping data labels, the labels are shown on top of each other:

When overlapping data labels are avoided, the labels move up or down:

How to enable the feature

To avoid overlapping data labels for the supported use cases, go to the CXO Configurator application on the server > Settings > Feature Enabling: Avoid Overlapping Chart Labels to true

Suggestions for other use cases

Labels that are next to each other are overlapping

Sometimes labels either from different categories or from different bar series are overlapping each other.

In that case, there are a few options at hand:

• The user can hover over a category to see all the numbers clearly

• The user or the report builder can change the precision and scale

• The report builder can make the controls wider

• The report builder can make the font of the data labels smaller

• The user can zoom in on the part of the chart

As a final option (and one we see often used) is to add a table under a chart that shows the same data, thus presenting the same information in an alternative way.

Labels are hard to read because other line series are shown behind them

With or without label repositioning to avoid overlaps, it can happen that a line (series) is crossing the space where a data label is.

In this case, the options are:

• The report builder can adjust the line color to improve readability

• The report builder can adjust the line style and dash style series (e.g. dashed, or dotted) to have less chance of labels being on top of a line series

• The report builder can adjust the color of the labels to improve readability
  
  

Labels from the same category overlap after chart height is adjusted

Charts may need to shrink vertically to make sure that labels fit on a chart - otherwise the labels might be cut off. This adjustment happens after all the labels are repositioned.

In very exceptional cases, for charts that are not so high, the following can happen

• Chart data is loaded

• Label positions are adjusted to avoid overlaps

• Chart shrinks vertically to accommodate for labels that don’t fit on a chart → small overlap between labels occurs

In this case, the options are:

• The report builder can adjust the min / max for value axis, so that labels don’t fall outside the chart

• The report builder can increase the height of the chart, so that shrinking of the chart is less prominent

• The user can zoom in on the part of the chart