hide overlapping or axis label with ellipses

[vikas29]

hi

I have a stock chart with dynamic data. I am using tickPostions to keep tick positions equal to x axis values. I don't wish to show all axis labels. But I need to use tickPositions. Also I can't use step or tickInterval as the data is highly dynamic.

My expectation is to show axis labels without ellipses and overlaps. see https://jsfiddle.net/vikas29/4td9x158/4/

However in my chart all the axis labels are displayed with ellipses. If data increases then no data labels are shown. But if I zoom in the chart using navigator then axis labels are shown.

thanks

[pawelys]

Hi! Thanks for contacting us with your question. The tickPositions option Is a final way of defining the places, where ticks are displayed on the axis, and is not overwritten by any other option, and also don't change without you, updating it. This is why, when you are adding more data, new labels don't show. Changing the extremes with zoom or navigator also doesn't change the ticks positions, just changes the Extremes, so the ticks, that are outside of the extremes are not rendered. Apart from that, I don't really understand what you mean by ellipses . I don't see any ellipses on the demo, you shared. You can control the labels by applying some conditional statement in formatter function, so that the labels, that don't fulfill the condition aren't rendered. Like in here: https://jsfiddle.net/BlackLabel/kdgj07ho/

Let me know, if that works for you. If not, please try to specify your goal more thoroughly. Kind regards,

[vikas29]

hi pawelys,

thanks for your reply. I have added a image to show the ellipses which I found in demo link : https://jsfiddle.net/vikas29/4td9x158/4/.
Also I have created another demo where I have commented tickPositions array. In this demo the axis labels are evenly spaced.
Link: https://jsfiddle.net/vikas29/krqc98oa/2/
So I want output some thing like in the demo (https://jsfiddle.net/vikas29/krqc98oa/2/) but with tickPositions array.

thanks

[pawelys]

Hi! I don't understand why you are specifying the tickPositions Array. if you want to show all ticks, then you specify it. If you don't, then you don't specify the tickPositions array. You can't have both. Could you specify your goal better, leaving the code behind?
Kind regards,

[vikas29]

hi pawelys,

my ultimate goal is to

1) render tick for each of my data point on x axis
2) if ticks are very close then hide axis labels for those ticks which may overlap each other.

For example if you see this example: https://jsfiddle.net/vikas29/krqc98oa/2/.
Here higcharts have generated ticks for all the data points but have displayed axis lables only for few data points.
If you see the attached image there is a tick rendered between axis labels 28 OCT and 30 OCT, I have marked it .
For this marked tick, highcharts have not generated axis label. I want to do exactly the same by specifying tickPositions.

thanks

[pawelys]

Hello again! You can add the labelCollector function in load object. Check the following demo and let me know, if that works for you: https://jsfiddle.net/BlackLabel/7n0k2mcg/

Kind regards,

[vikas29]

hi pawelys,

we have analyzed the solution you have provided. However we have realized that if tickPositions array is large then it generates too many tick positions hence the x-axis becomes congested.
Also in the demo you provided : https://jsfiddle.net/BlackLabel/7n0k2mcg/ if we shrink the UI section and again enlarge it then the axis labels are appearing very close to each other making it difficult to read those.
So we have decided to not to use tickPositions array and rely on highcharts internal logic for the same.
thanks for your help
regards

[pawelys]

Ok, thanks for the update! In case of any further questions feel free to contact us again! Kind regards,

[Zolotoy]

I am trying to hide overlapping labels by adding this to the Labels collection:
overflow: false,
allowOverlap: false

But nothing helps. Any help here?

Thanks.

[jakub.j]

Hey!

Could you reproduce the issue in an online editor that I could work on?
It is hard to tell you what is not working and what could be done without taking a look at your code.

Kind regards
Jakub

[Zolotoy]

I am sure I can replicate it in an example. But, meanwhile, is there a way to catch a moment when a label is overlapping another label?

[Zolotoy]

I think what's happening is that I have multiple X axis and overlapping labels are between two bordering X axis.

[jakub.j]

Hey!

In this case you can hide last label by setting xAxis.showLastLabel to false or create custom ticks, see:

Demo: https://jsfiddle.net/BlackLabel/oqkwtuf3/

Kind regards
Jakub

[Zolotoy]

Is there a way to loop through labels and find out whether there are the overlapping ones?

[jakub.j]

Hey!

You can find them after hideOverlappingLabels call, see:

Demo: https://jsfiddle.net/BlackLabel/hksv83c5/

Kind regards
Jakub