z.moghbel
Posts: 9
Joined: Sat Sep 10, 2022 4:31 am

RangeSelector does not show on my chart.

Hi,

I created a chart with some options and added rangeSelector for it. But rangeSelector does not show for me.

The example in jsFiddle is:
https://jsfiddle.net/fx7ju0hb/6/

Could you help me, Please?
Thanks
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: RangeSelector does not show on my chart.

Hello z.moghbel!

Thanks for contacting us again.

The rangeSelector property can be applied only to the Stock chart. Please, take a look at our docs: https://api.highcharts.com/highstock/rangeSelector. In the top left corner, you can find a dropdown to choose a type. Apart from the regular charts, we offer also the Stock, Map, and Gantt charts and the properties/implementation between them differ.

I've updated your example: https://jsfiddle.net/BlackLabel/f2r0v5np/1/. What changed basically is the imported script as well as the Highcharts.stockChart method as the proper initialization of the Stock chart.

I hope you will find it useful,
Kind Regards!
Kamil Kubik
Highcharts Developer
z.moghbel
Posts: 9
Joined: Sat Sep 10, 2022 4:31 am

Re: RangeSelector does not show on my chart.

Thank you for your quick reply. Now, rangeSelector show on my chart. but when I click on 'all' in rangeSelector, the x labels do not show. why does it happen?
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: RangeSelector does not show on my chart.

It happens because of the tickPositions property that defines the stale ticks on every selected range. Have you tried to change these ticks or remove this property in favor of tickInterval property that can also set the ticks every month?
Kamil Kubik
Highcharts Developer
z.moghbel
Posts: 9
Joined: Sat Sep 10, 2022 4:31 am

Re: RangeSelector does not show on my chart.

kamil.k wrote: Tue Feb 07, 2023 2:52 pm It happens because of the tickPositions property that defines the stale ticks on every selected range. Have you tried to change these ticks or remove this property in favor of tickInterval property that can also set the ticks every month?
I don't get exactly what do you mean? could you please give me an example?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: RangeSelector does not show on my chart.

Hey,

You can set xAxis.tickInterval to any value in milliseconds, so then you don't need to have the exact tickPositions.
In your case the tickInterval should be one month which is 30 * 24 * 3600 * 1000 in milliseconds.

I prepared a live demo using tickInterval property.

Demo: https://jsfiddle.net/BlackLabel/49srxpcq/
API: https://api.highcharts.com/highstock/xAxis.tickInterval

Let me know if you have any further questions!

Regards
Jakub
z.moghbel
Posts: 9
Joined: Sat Sep 10, 2022 4:31 am

Re: RangeSelector does not show on my chart.

jakub.j wrote: Wed Feb 15, 2023 8:55 am Hey,

You can set xAxis.tickInterval to any value in milliseconds, so then you don't need to have the exact tickPositions.
In your case the tickInterval should be one month which is 30 * 24 * 3600 * 1000 in milliseconds.

I prepared a live demo using tickInterval property.

Demo: https://jsfiddle.net/BlackLabel/49srxpcq/
API: https://api.highcharts.com/highstock/xAxis.tickInterval

Let me know if you have any further questions!

Regards
Jakub
Thank you very much for your nice answer, but if I want to show each x label below the middle of each column. how can I do that?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: RangeSelector does not show on my chart.

You're welcome!

You can position the labels in the middle of the column using tickPositions.
I put your data into a variable and separated the datetime data to another array which I used as tickPositions.

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

Feel free to ask any further questions!

Regards
Jakub

Return to “Highcharts Stock”