Avoid overlapping chart data labels
Introduction
It is often handy to show data labels next to the chart data points. However, if the data points are too close to each other, it happens that labels are overlapping so much that it’s hard to read the numbers on the chart. When interacting with the CXO report in the web, you can hover and see what the numbers are. This is a suboptimal user experience and it doesn’t address the same problem when CXO reports are exported to PDF or PPT.
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.
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
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.
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.
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
Chart data is loaded
(LY has the same value as Actual)
Labels repositioned to avoid overlap
(LY now showing under series)
Chart shrinks to show Sep, Actual label 664
(small overlap occurs for May and Jul)
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