boraerel
Posts: 4
Joined: Tue Jul 25, 2023 1:12 pm

Range Picker Custom

Hi,
Is there anyway to change RangePicker Custom Component "http://keith-wood.name/datepick.html#range" range picker. I want to use this component when i press the "Choose Date" a href.
Could you please help me.
Thanks.
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Range Picker Custom

Hi!

Thanks for contacting us with your question!

Of course, it is possible to incorporate custom date or date range pickers into Highcharts! After enabling your custom date picker, you'd have to take these values and use setExtremes method to change visible range of the chart. Take a look at below example to see it in action. If you'd also like to disable the built-in date picker, you could disable rangeSelector.inputEnabled property.

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

API:
https://api.highcharts.com/class-refere ... etExtremes
https://api.highcharts.com/highstock/ra ... putEnabled

Let me know if that was what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
boraerel
Posts: 4
Joined: Tue Jul 25, 2023 1:12 pm

Re: Range Picker Custom

Thanks for your reply. Is there any way to put these component in to the rangepicker place of right top to chart?
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Range Picker Custom

Of course! You can wrap these elements (Highcharts container and date picker) in another div, and then play around with the position of the input. For example, you could add position: absolute CSS property to the picker and place it in the top right corner of the Highcharts container.

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

In case you happen to have any more questions, feel free to ask anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Stock”