vikas29
Posts: 10
Joined: Fri May 14, 2021 11:05 am

hide overlapping or axis label with ellipses

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
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: hide overlapping or axis label with ellipses

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,
Paweł Lysy
Highcharts Developer
vikas29
Posts: 10
Joined: Fri May 14, 2021 11:05 am

Re: hide overlapping or axis label with ellipses

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
Attachments
ellipses.PNG
ellipses.PNG (4.88 KiB) Viewed 2146 times
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: hide overlapping or axis label with ellipses

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,
Paweł Lysy
Highcharts Developer
vikas29
Posts: 10
Joined: Fri May 14, 2021 11:05 am

Re: hide overlapping or axis label with ellipses

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
Attachments
demo1.PNG
demo1.PNG (5.95 KiB) Viewed 2135 times
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: hide overlapping or axis label with ellipses

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,
Paweł Lysy
Highcharts Developer
vikas29
Posts: 10
Joined: Fri May 14, 2021 11:05 am

Re: hide overlapping or axis label with ellipses

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
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: hide overlapping or axis label with ellipses

Ok, thanks for the update! In case of any further questions feel free to contact us again! Kind regards,
Paweł Lysy
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: hide overlapping or axis label with ellipses

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
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: hide overlapping or axis label with ellipses

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
Jakub
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: hide overlapping or axis label with ellipses

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
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: hide overlapping or axis label with ellipses

I think what's happening is that I have multiple X axis and overlapping labels are between two bordering X axis.
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: hide overlapping or axis label with ellipses

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
Jakub
Highcharts Developer
Zolotoy
Posts: 270
Joined: Tue Apr 14, 2020 10:06 am

Re: hide overlapping or axis label with ellipses

Is there a way to loop through labels and find out whether there are the overlapping ones?
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: hide overlapping or axis label with ellipses

Hey!

You can find them after hideOverlappingLabels call, see:

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

Kind regards
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Stock”