amigopeta
Posts: 6
Joined: Tue Nov 28, 2023 6:08 am

Custom settings for a component

Hello, I was wondering whether it's possible to add your own custom settings in the Edit mode. For example changing a font color, font size, series color, etc.

Here's what I mean, thank you for your answers :)
Attachments
settings.png
settings.png (7.5 KiB) Viewed 724 times
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Custom settings for a component

Hi,

Thank you for the question!

You can use the EditableOptions to change what can be set for individual components.

In the example below, you can see commented default options for the chart component. You can expand the array if needed.

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

I noticed that there is no article about this in the documentation. If you have any further problems or questions with this, let me know. In the meantime, I will try to include more about it in the docs.

Best regards!
Dawid Draguła
Highcharts Developer
liorhe
Posts: 9
Joined: Mon Feb 26, 2024 2:36 am

Re: Custom settings for a component

Following up on this topic.
Is there a way to remove the need to drill into sections to see the inputs?
For example, Considering the connector is only one input, It doesn't have to be nested inside a group.
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Custom settings for a component

Hi liorhe,
Is there a way to remove the need to drill into sections to see the inputs?
Unfortunately, it seems that the API does not provide such an option. Anyway, I think this is a very good idea to implement in the near future. If you want, you can submit it as a feature request on our GitHub: https://github.com/highcharts/highchart ... new/choose

Kind regards
Dawid Draguła
Highcharts Developer
liorhe
Posts: 9
Joined: Mon Feb 26, 2024 2:36 am

Re: Custom settings for a component

I sent the feature suggestion. Thank you!
amigopeta
Posts: 6
Joined: Tue Nov 28, 2023 6:08 am

Re: Custom settings for a component

dawid.d wrote: Fri Mar 01, 2024 12:48 pm Hi,

Thank you for the question!

You can use the EditableOptions to change what can be set for individual components.

In the example below, you can see commented default options for the chart component. You can expand the array if needed.

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

I noticed that there is no article about this in the documentation. If you have any further problems or questions with this, let me know. In the meantime, I will try to include more about it in the docs.

Best regards!
Thank you for your reply! :) This solved part of my problem, do you also have a demo where you can change for example - color of a chart in a dashboard using custom options or something? Or any custom option that does something to the chart like changing font size or anything.

Have a nice day! :)
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Custom settings for a component

Hi, yes, sure!

Demo: https://jsfiddle.net/BlackLabel/9o45La2b/

Also remember that when changing colors, use styled-mode (https://www.highcharts.com/docs/chart-d ... yle-by-css) because charts in Dashboards are styled by CSS by default. That's why I did it by class names here.

Have a nice day too! :D
Dawid Draguła
Highcharts Developer
amigopeta
Posts: 6
Joined: Tue Nov 28, 2023 6:08 am

Re: Custom settings for a component

dawid.d wrote: Mon Mar 11, 2024 8:41 am Hi, yes, sure!

Demo: https://jsfiddle.net/BlackLabel/9o45La2b/

Also remember that when changing colors, use styled-mode (https://www.highcharts.com/docs/chart-d ... yle-by-css) because charts in Dashboards are styled by CSS by default. That's why I did it by class names here.

Have a nice day too! :D
Thank you! :D Is there a way to make the setting "global"? So I don't have to put it in editableOptions into every single component separately? Because I have a lot of components.
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Custom settings for a component

Hi, yes! You can do it globally for the component type by changing its default options.

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

Hope that's what you were looking for!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”