igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

Customized Button

Hi,

Could I change the Range selector All button size only? or I have to create anew custom button?

I need to change the text and size of the All Button from All to "Since Jan, 2019" and for that reason I need to change the size of the button, but I couldn't find where I could change only this button instead of all buttons size.

If that is not possible, so I guess I will have to create a new custom button with the functionality of show all period or only from 01-2019 on.

I created a custom button in the code below, but I cannot create the functionality I need.

if somebody could help me with it, I appreciate your help.

Thank you,

Ivan

https://jsfiddle.net/igrasso/7gzp1ayf/34/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Customized Button

Hi igrasso,

Thanks for contacting us with your question.

Both suggested options are viable in this case, it is up to you which one you like better. If you want to style single specific range selector button, then you could add a new class name with addClass method (https://api.highcharts.com/class-refere ... t#addClass), and then use some CSS to style the button.

When it comes to the custom button, to apply a new date range you need to use setExtremes function (https://api.highcharts.com/class-refere ... etExtremes) which is BTW. used by range selector under the hood.
Both solutions you can find in this demo:
https://jsfiddle.net/BlackLabel/5u41hcmn/

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

Re: Customized Button

Hi Mateus,

Thank you so much for your explanation and code. I chose to go with the first option.

Everything looks fine except that transform:translateX is not working on Safari even if I add the group/prefix.

-ms-transform: translateX(25px);
-webkit-transform: translateX(25px);
-moz-transform: translateX(25px);
-o-transform: translateX(25px);
transform: translateX(25px);

On Google Chrome works fine but. not on Safari :|

https://jsfiddle.net/igrasso/g0ftLsv1/1/
igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

Re: Customized Button

I am using Safari 15.0

image
https://ibb.co/GC6JSYG
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Customized Button

Hi igrasso,

For some reasons safari doesn't respect translate property, even when applied directly with a class name. As an alternative please try to use Highcharts' native translate() method.
Demo: https://jsfiddle.net/BlackLabel/k420f6w8/

Let me know if it works.
Regards!
Mateusz Bernacik
Highcharts Developer
igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

Re: Customized Button

Perfect!

Thank you so much for your help.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Customized Button

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”