Toshan
Posts: 3
Joined: Fri Oct 15, 2021 3:41 pm

How to change the font size of the range selector dropdown menu options?

Hello!

I'm having an issue with the font size of the range selector dropdown menu options being super small.

Fortunately, I know where the problem lies. I've set the font size of my app to be 62.5%, or 10px, since the default font size is 16px. I'm doing this to improve responsiveness and to make it easier to calculate rem values.

Now, I've been looking for quite a while, but I can't find any way to change the dropdown menu options font size.

However, I've managed to change the font size of the range selector button the following way:

Code: Select all

rangeSelector: {
    buttonTheme: {
      style: {
        fontSize: "1.5rem",
      },
    },
   }
   
Is there a similar way that I can change the dropdown menu options font size?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to change the font size of the range selector dropdown menu options?

Hi,

Welcome to our forum and thanks for contacting us with your question!

Could you please precise is it your own dropdown menu or you meant context menu?
You can easily change the context menu font style through menuItemStyle.

API Reference:
https://api.highcharts.com/highcharts/n ... uItemStyle

Demo:
http://jsfiddle.net/BlackLabel/5jw6okd9/

Let me know if that was what you were looking for,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
Toshan
Posts: 3
Joined: Fri Oct 15, 2021 3:41 pm

Re: How to change the font size of the range selector dropdown menu options?

Hello,

thanks for getting back to me!

I mean the dropdown menu, not the context menu. The same dropdown menu that's being demo'd in this jsfiddle: https://jsfiddle.net/gh/get/library/pur ... /dropdown/

In other words, the range selector dropdown menu that appears when there's not enough room to show all the range selector buttons in a single row.
That's the menu whose font size I'd like to change, if possible.

Thanks in advance!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to change the font size of the range selector dropdown menu options?

Hi,

I apologize for the misunderstanding. This functionality is not possible from the API. You can easily change it using CSS code:

Code: Select all

select {
	font-size: 20px;
}

Feel free to ask any further questions!
Regards
Magdalena Gut
Developer and Highcharts Support Engineer
Toshan
Posts: 3
Joined: Fri Oct 15, 2021 3:41 pm

Re: How to change the font size of the range selector dropdown menu options?

Amazing, exactly what I was looking for!

Thank you so much :)
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to change the font size of the range selector dropdown menu options?

You're welcome! In case of any further questions, feel free to contact us again!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”