How do I make a Highcharts timeline where the labels don't overlap and none are hidden?

0
votes

I'm trying to make a horizontal timeline of events with Highcharts. I already have it almost working, except for one small detail:

If I enable allowOverlap, the labels... overlap each other. That is, they simply are drawn over each other, with no regard to each other. They don't change their "order" even when I hover the mouse cursor over the "lowest" ones, and not even if I click them.

However, if I disable allowOverlap, some labels simply aren't shown at all! If I hover the mouse cursor over their "ball" marker on the timeline, a little label pops up, but it's not the "full" label thing that the others have, and either way, I want them to always show and not have to hover anything.

I need all of the labels to show at the same time, yet not visually overlap.

The container div is 10,000 pixels wide, so there is more than enough room for all of them to be visually displayed. There's tons of blank space, both on the sides of each label and especially above and underneath them. And the label texts are extremely short too, so they don't even take up a lot of space.

I'm not sure if I'm missing some obvious option to "enable crowded labels" or something, but considering how well coded and polished Highcharts is, I very much doubt that it's simply not "smart enough" to be able to handle my labels. I wouldn't even say that I have an "extreme" amount of events in my timeline. Just a few of them happen to be close to each other time-wise, but if a human made the timeline, they would just put the labels slightly on the left/right/above/underneath and draw a diagonal line or something like that.

I have of course read the documentation -- for many hours -- but was not able to find any obvious option such as allowMessyLabels.

I base my timeline on the one and only timeline example provided by Highcharts. Nothing weird or fancy. Just a simple, long, horizontal timeline of events important to me.

1
highchartstimeline

1 Answers

0
votes

Let me clarify how the allowOverlap option works - the logic calculates if there is enough space for each label to render it without overlapping. If overlapping exists the allowOverlap is an option that gives a user a choice to show all labels no matter of their overlapping or not. As it is suggested in the API you can try to make the logic less sensitive by setting the dataLabels.padding as 0.

API: https://api.highcharts.com/highcharts/plotOptions.line.dataLabels.allowOverlap

If I hover the mouse cursor over their "ball" marker on the timeline, a little label pops up, but it's not the "full" label thing that the others have, and either way, I want them to always show and not have to hover anything.

This pops up is a tooltip which is a different feature - https://www.highcharts.com/docs/chart-concepts/tooltip

So, let's code now - could you reproduce your case on some online editor which I could work on? I will try to find the solution.