How can I show all Timeline Highcharts data without any overlapping? - highcharts

Question

I have data like this:
var data = [{
x: Date.UTC(1951, 5, 22),
name: 'First dogs in space',
label: 'fds',
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'</span><br/>{point.label}'
},
}, {
x: Date.UTC(1957, 9, 4),
name: 'First artificial satellite',
label: 'First artificial satellite',
}, {
x: Date.UTC(1959, 0, 4),
name: 'First artificial satellite to reach the Moon',
label: 'First artificial satellite to reach the Moon',
}, {
x: Date.UTC(1961, 3, 12),
name: 'First human spaceflight',
label: 'First human spaceflight',
}, {
x: Date.UTC(1966, 1, 3),
name: 'First soft landing on the Moon',
label: 'First soft landing on the Moon',
}, {
x: Date.UTC(1969, 6, 20),
name: 'First human on the Moon',
label: 'First human on the Moon',
}, {
x: Date.UTC(1971, 3, 19),
name: 'First space station',
label: 'First space station',
}, {
x: Date.UTC(1971, 11, 2),
name: 'First soft Mars landing',
label: 'First soft Mars landing',
}, {
x: Date.UTC(1976, 3, 17),
name: 'Closest flyby of the Sun',
label: 'Closest flyby of the Sun',
}, {
x: Date.UTC(1978, 11, 4),
name: 'First orbital exploration of Venus',
label: 'First orbital exploration of Venus',
}, {
x: Date.UTC(1986, 1, 19),
name: 'First inhabited space station',
label: 'First inhabited space station',
}, {
x: Date.UTC(1989, 7, 8),
name: 'First astrometric satellite',
label: 'First astrometric satellite',
}, {
x: Date.UTC(1998, 10, 20),
name: 'First multinational space station',
label: 'First multinational space station',
}];
Here is the fiddle link for your reference: Fiddle
Screenshot for reference:
I want to show all the label without any overlap right now if the date is near about then it's overlapped.
I tried :
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold; white-space:nowrap;" > ' +
'{point.x:%d-%b-%Y}</span><br/>{point.label}'
},
But it's only shows points instead of label when overlapped.

Answer 1

You can make more space for the labels by changing extremes:
Highcharts.chart('container', {
...
}, function() {
const min = Math.max(this.series[0].points.length - 3, 0);
const max = Math.max(this.series[0].points.length - 1, 0);
this.xAxis[0].setExtremes(
this.series[0].points[min].x,
this.series[0].points[max].x
);
});
Live demo: https://jsfiddle.net/BlackLabel/e82jtrsw/
or overwrite distributeDL timeline series method to make more use of the available space:
Example:
(function(H) {
H.seriesTypes.timeline.prototype.distributeDL = function() {
var series = this,
dataLabelsOptions = series.options.dataLabels,
options,
pointDLOptions,
newOptions = {},
visibilityIndex = 1,
j = 2,
distance;
series.points.forEach(function(point, i) {
distance = dataLabelsOptions.distance;
if (point.visible && !point.isNull) {
options = point.options;
pointDLOptions = point.options.dataLabels;
if (!series.hasRendered) {
point.userDLOptions = H.merge({}, pointDLOptions);
}
if (i === j || i === j + 1) {
distance = distance * 2.5
if (i === j + 1) {
j += 4
}
}
newOptions[series.chart.inverted ? 'x' : 'y'] =
dataLabelsOptions.alternate && visibilityIndex % 2 ?
-distance : distance;
options.dataLabels = H.merge(newOptions, point.userDLOptions);
visibilityIndex++;
}
});
}
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/fa2obzwq/
Docs: https://www.highcharts.com/docs/extending-highcharts