Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Problem with custom tick positions in x range

This issue has cropped up when I tried to implement the solution I got in https://forum.highcharts.com/highcharts ... 3985aa7cae. The solution works great for all cases except when there is only 1 series.

The solution that I implemented is https://jsfiddle.net/yvnp4su0/50/
This is in comparison to a normal x-range http://jsfiddle.net/hq1kdpmo/55/

The first thing that made me realise something was wrong is when I saw that the margin in the custom tick was greater.
chart.png
chart.png (64.91 KiB) Viewed 1587 times
.

But I was sure that there was some problem when I had a use case of only 1 series like in https://jsfiddle.net/yvnp4su0/51/

After investigating I found a discrepancy between the automatic implementation and the custom one.
Screenshot_1.png
Screenshot_1.png (80.96 KiB) Viewed 1587 times
The left is the automatic one and the right is the custom tick one.

You can see how the automatic one doesn't have all the elements in tickPositions that are there in ticks, especially the -1 tick.

I have not been able to figure this out myself. Please help!

Thanks and Regards
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Problem with custom tick positions in x range

Hi, Kodeblox!

Firstly, I need to ask - do you have any specific problem with your chart or you want to achieve something specific? Or you are just trying to understand what is happening with your chart and how exactly are ticks working? Because I don't see any question and I do not quite know what to answer to you.

Do you want to know why there is a difference in top margins in charts you showed above?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Problem with custom tick positions in x range

Ah! I am sorry I wasn't clear enough. My problem is visualised in https://jsfiddle.net/yvnp4su0/51/ . I just have a hunch that this is related to the extra margin as I showed in the picture.

It was mostly me trying to triage the issue :D

Thanks!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Problem with custom tick positions in x range

Kodeblox,

When I saw for the first time your code and how you set your ticks and categories, I knew that it is not the right way to do it, but, with your request, I answered your questions and solved your specific issues. I thought that you want to create a static chart and you will not change your ticks so I didn't recommend to change it. But now I can see that you want to change the number of points and ticks. I still don't know the logic of your chart so I can't help you with finding the proper algorithm for ticks calculations, but I can tell you why this chart (https://jsfiddle.net/yvnp4su0/51/) displays so strange.

If you console.log(tickPositions) array you will see that you have defined 2 ticks but you define series with points with only 1 y=0. So chart creates 2 categories [-1, 0] and your points are connected to, as you defined y=0, second tick (the first one is -1). I don't even know why you defined tick as -1.

After you correct your tickPositions array, everything will be displayed just fine. If you have point with y=0 only, you should define tickPositions = [0] array. Of you can remove this line yAxis.tickPositions: tickPositions so chart will define tickPositions = [0] by default.

jsFiddle: https://jsfiddle.net/BlackLabel/x3vungbz/

I hope it's more clear for you now ;)

Best regards!

edit: if I remember correctly, the extra margin when you compared 2 charts was there because of different height of charts, number of points, pointPaddings and ticks width. But everything looks as expected
Rafal Sebestjanski,
Highcharts Team Lead
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Problem with custom tick positions in x range

Hi!
I had an inkling that the tickPosition was causing the issue. Setting tickPosition = [0] when there is only 1 series is something that I can totally do. Thanks again for helping me out.

After encountering this issue even I realised that this might not be the best way to do this. What I am trying to achieve is depicted here https://jsfiddle.net/yvnp4su0/50/ . Basically, I will have multiple timelines for categories and the number of timelines for each category and the number of categories are both subject to change from 1 to n. So, I am creating all the series first and then setting the tick Positions after careful calculations. But as you saw, it failed when there is only 1 series and 1 category.

After some testing I am seeing that if I want to have 2 series in a single category, my solution https://jsfiddle.net/yvnp4su0/66/ as well as your solution https://jsfiddle.net/wk7em5a2/ is failing.

It would be a great help if you can assist me through this. Please do tell if you need any more info.

Thanks and Regards
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Problem with custom tick positions in x range

Kodeblox,

What you are trying to do (connect n number of series on different high to one separate category) is not possible with this type of chart. It is the best to let Highcharts do the categories and ticks calculations as you can see in this simplified example: https://jsfiddle.net/BlackLabel/2dfL71t9/. I still don't quite know what you are going to visualize on your chart so it's hard for me to fit the best categories and ticks calculations, but, as I said, it might be impossible to display specific category for n number of randomly grouped series.

Kind regards
Rafal Sebestjanski,
Highcharts Team Lead
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Problem with custom tick positions in x range

I was afraid that this was going into the impossible territory :cry: . I had been fiddling around and it seems like there is some assumptions in the API which is causing my issues. I will keep using the hacks that we have come up thanks to your help :)

Anyway I will try to explain my dataset incase you get some idea.

The data comes from say 6 people using 4 items, there being multiple number of each item so that any person can use one. A person can use any number of times for any amount of time. My job is to draw timelines of the use of the items.
The persons are the categories and the items are the series items. Since each person can use any number of item at a time, I wanted to group the multiple bars in one category.

Thanks and regards
Kodeblox
Posts: 29
Joined: Sun Feb 04, 2018 7:26 am

Re: Problem with custom tick positions in x range

I DID IT!!

The elusive property was yAxis.startOnTick which defaults to true. As soon as I set it to false, everything works perfectly.
Fiddle with lots of data https://jsfiddle.net/yvnp4su0/67/
Fiddle with only 1 category but more than 1 series https://jsfiddle.net/yvnp4su0/68/
Fiddle with only 1 category and 1 series https://jsfiddle.net/yvnp4su0/69/

I believe this solves my issue. Thank you for patiently listening and helping me out.

Regards
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Problem with custom tick positions in x range

Kodeblox,

It's great to hear that!

Have a good week!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”