Highcharts dataLabels reposition on overlap - graph

Question

I have a Highcharts component where the user can add comments to a graph, and the comment shows up as a dataLabel in a scatter series. However, I noticed that by default the allowOverlap just removes the dataLabels that collides, and my question to this is: would it be possible to make the colliding dataLabels stack on top of each other? I'm thinking that since the allowOverlap: true can detect which ones that are colliding, there might be a way to take advantage of this?
This is how my dataLabels look now:
This is my goal:
Hope that someone can help me with a clever solution, I sure know I am out of ideas!
By the way, right now the dataLabels gets their xAxis position by dividing the xAxis :{ max: value } by 1,5. This is just to position it equally on all my graphs, which all have different min and max values. Might be worth mentioning.

Answer 1

It is possible to override the funciton that should be hiding the overlapping labels and adjust position of the overlapping labels like this:
$(function() {
(function(H) {
var each = H.each,
UNDEFINED;
H.Chart.prototype.hideOverlappingLabels = function(labels, rerun) {
if (rerun === UNDEFINED ||
rerun < 10) //infinity loop limit
{
var doTheRerun = false,
len = labels.length,
label, i, j, label1, label2,
isIntersecting, pos1, pos2, parent1, parent2,
padding,
intersectRect = function(x1, y1, w1, h1, x2, y2, w2, h2) {
return !(
x2 > x1 + w1 ||
x2 + w2 < x1 ||
y2 > y1 + h1 ||
y2 + h2 < y1
);
};
for (i = 0; i < len; i++) {
label = labels[i];
if (label) {
label.oldOpacity = label.opacity;
label.newOpacity = 1;
}
}
labels.sort(function(a, b) {
return (b.labelrank || 0) - (a.labelrank || 0);
});
for (i = 0; i < len; i++) {
label1 = labels[i];
for (j = i + 1; j < len; ++j) {
label2 = labels[j];
if (label1 && label2 && label1.placed && label2.placed && label1.newOpacity !== 0 && label2.newOpacity !== 0) {
pos1 = label1.alignAttr;
pos2 = label2.alignAttr;
parent1 = label1.parentGroup; // Different panes have different positions
parent2 = label2.parentGroup;
padding = 2 * (label1.box ? 0 : label1.padding); // Substract the padding if no background or border (#4333)
isIntersecting = intersectRect(
pos1.x + parent1.translateX,
pos1.y + parent1.translateY,
label1.width - padding,
label1.height - padding,
pos2.x + parent2.translateX,
pos2.y + parent2.translateY,
label2.width - padding,
label2.height - padding
);
if (isIntersecting) {
(label1.labelrank < label2.labelrank ? label1 : label2).addHeightOffset = true;
}
}
}
}
each(labels, function(label) {
var complete,
newOpacity;
if (label) {
if (label.addHeightOffset && label.placed) {
label.alignAttr.y -= label.height;
label.addHeightOffset = false;
doTheRerun = true;
}
label['attr'](label.alignAttr);
}
});
if (doTheRerun) {
rerun = (rerun || 0) + 1;
H.Chart.prototype.hideOverlappingLabels(labels, rerun);
}
}
};
}(Highcharts))
$('#container').highcharts({
series: [{
dataLabels: {
enabled: true,
format: 'The value that is important for this point is: {y}'
},
data: [1, 2, 1, 1, 2, 2, 2]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Demo in JSFiddle: http://jsfiddle.net/ozLtvwke/1/