Problem of x-axis not being aligned when using select tag

[minjoo]

Hello, my name is Minju and I live in Seoul, Korea.
I'm using the high chart you made for my work.
(Of course, this account is a personal account, and there is a separate account paid for work.)
Thank you for making a good chart.

I have a question to ask you.
I have to change the series of charts using select.
So after updating the series, I wrote a code that changed the x-axis of the chart and navigator using 'set Categories'.
(select onchange function : lineNaviSelectFn)

Month and quarter work normally, but year has a problem that 2021 is not aligned properly.
Also, if you go from month to year, the thickness of the crossshair is equal to month.

However, if you move the navigator slightly, you will see the x-axis of the normal year.
How can I solve this problem?

The methods I've used are as follows.
1. tickpositions
2. setCategories settimeout

Please check my code pen link.
https://codepen.io/minjooo/pen/RwYbrbO

I'd appreciate your help.
(I used a translator because I couldn't speak English. We ask for your understanding.)

[jakub.s]

Hi Minju!

Welcome to our forum & thanks for the question!

Keep in mind that you could use the rangeSelector which is a part of Highstock.

But if you want to use your custom range selector, I would recommend doing a few things first:

- Using xAxis.setExtremes instead of xAxis.setCategories might make these changes faster + you don't need to iterate through categories and make new ones.

- It would be better to use xAxis type datetime & passing a unix timestamp as data.x (it'll require some data preprocessing) but then everything should work correctly

- You could also use xAxis.dateTimeLabelFormats so that Highchars would automatically update the labels to the format you want depending on the range. Here's the API: https://api.highcharts.com/highcharts/x ... belFormats

If you simplify a few things in your code your range selector could look like this:
Demo: https://jsfiddle.net/BlackLabel/8ry6q0L4/

With unix timestamps as your x of the data, xAxis.setExtremes and xAxis.dateTimeLabelFormats everything should be much simpler & working without any problems.

Let me know if that helps.

Best regards,
Jakub

[minjoo]

hello! Thank you for leaving an answer.
I was able to solve the problem with your answer.

Resolution
1. First of all I couldn't use dataTime. This is because there was a character in the data that should represent a quarter.
2. Using setExtremes instead of setCategories had a problem with the x-axis not appearing!
3. So I used setExtrems after setCategories! => This method worked!

I'll leave my codepen and my edits there for anyone looking at this forum.
Because I also received a lot of help through the forum.
https://codepen.io/minjooo/pen/ababPpV

** before

Code: Select all

chart.xAxis[0].setCategories(xAxisResult, true);
chart.navigator.xAxis.setCategories(xAxisResult, true);

** after

Code: Select all

chart.xAxis[0].setCategories(xAxisResult, true);
chart.navigator.xAxis.setCategories(xAxisResult, true);
chart.xAxis[0].setExtremes(0, xAxisResult.length-1);
chart.navigator.xAxis.setExtremes(0, xAxisResult.length-1);

thank you Jakub!
(I did not speak English, so I used a translator. Thank you for your understanding.)

[jakub.s]

I'm glad you figured it out!

Do not hesitate to ask if any more questions arise!

Regards,
Jakub