dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Is it possible to extend StockTools toolbar?

Looking at the documentation here for StockTools: https://www.highcharts.com/docs/stock/stock-tools

I see i can add elements and bind them to stock tool events. But really what i'd like to do is add another 'button' to the stock tool tool bar.
For example, there is a toggle button for toggling 'Current Price' already. I'd like to add one to toggle the y-axis cross hair. I know i could add a button elsewhere to do this...but wondering if that button can be added to the existing stocktools tool bar.

thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Is it possible to extend StockTools toolbar?

Hello, dizzy!

Sure, it is possible to add a custom button to the stock tools GUI. It's not super easy, but definitely can be done!

Firstly, of course, you have to add StockTools to your chart. Then, in the stockTools.gui.buttons, you have to redefine the array of buttons (you can add, remove, or change their order there).
In the definitions property, refer to the newly created button by stockTools.gui.definitions.nameOfYourButton and create its class name there.

Then in the navigation.bindings.nameOfYourButton, refer to the newly created className, and in the init method define a function that should be called on a button click.

As a side note, take a look at the CSS file and how the button logo is assigned to it (due to the Highcharts nature, you need to add the !important flag after the URL, to overwrite the inline CSS).

DEMO: https://jsfiddle.net/BlackLabel/mwLa281x/

And that's it! I hope that you didn't get scared by the instructions :D
Play around with the demo and you will quickly get it.

Best regards!
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Is it possible to extend StockTools toolbar?

excellent thanks!
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Is it possible to extend StockTools toolbar?

kamil.m wrote: Wed Sep 07, 2022 10:23 am Hello, dizzy!

Sure, it is possible to add a custom button to the stock tools GUI. It's not super easy, but definitely can be done!

Firstly, of course, you have to add StockTools to your chart. Then, in the stockTools.gui.buttons, you have to redefine the array of buttons (you can add, remove, or change their order there).
In the definitions property, refer to the newly created button by stockTools.gui.definitions.nameOfYourButton and create its class name there.

Then in the navigation.bindings.nameOfYourButton, refer to the newly created className, and in the init method define a function that should be called on a button click.

As a side note, take a look at the CSS file and how the button logo is assigned to it (due to the Highcharts nature, you need to add the !important flag after the URL, to overwrite the inline CSS).

DEMO: https://jsfiddle.net/BlackLabel/mwLa281x/

And that's it! I hope that you didn't get scared by the instructions :D
Play around with the demo and you will quickly get it.

Best regards!
One think i noticed..you have to click twice for the even to code to fire.
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Is it possible to extend StockTools toolbar?

Im also curious as to how the "current price indicator' changes image to indicate toggle state. inspecting the element between toggle/not toggled state doesnt seem to indicate any new classes being applied.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Is it possible to extend StockTools toolbar?

The icons in the Stock Tools toolbar are simple images, that are injected inline into HTML.

So the default state of this button looks like this:

Code: Select all

<span class="highcharts-menu-item-btn" style="background-image: url(&quot;https://code.highcharts.com/10.2.1/gfx/stock-icons/current-price-show.svg&quot;);"></span>
And the clicked state looks like this:

Code: Select all

<span class="highcharts-menu-item-btn" style="background-image: url(&quot;https://code.highcharts.com/10.2.1/gfx/stock-icons/current-price-hide.svg&quot;);"></span>
Notice how the image path changes.
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Is it possible to extend StockTools toolbar?

ah i see. thanks much for that explanation. Any thoughts on why we have to click twice to toggle the newly added button in your example?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Is it possible to extend StockTools toolbar?

You're welcome!

I'm sorry, but I must have missed the question about clicking the button twice. That's the default behaviour, once you test other buttons you see that they get deselected by an event such as clicking on the chart, adding an annotation etc.

But we can fire that event manually!

Take a look at the demo, and tell me if that's what you wanted to achieve.
DEMO: https://jsfiddle.net/BlackLabel/yonqrwtz/

Once again, I'm sorry that you had to wait for an answer to this one,
Regards!
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Is it possible to extend StockTools toolbar?

kamil.m wrote: Mon Sep 12, 2022 10:01 am You're welcome!

I'm sorry, but I must have missed the question about clicking the button twice. That's the default behaviour, once you test other buttons you see that they get deselected by an event such as clicking on the chart, adding an annotation etc.

But we can fire that event manually!

Take a look at the demo, and tell me if that's what you wanted to achieve.
DEMO: https://jsfiddle.net/BlackLabel/yonqrwtz/

Once again, I'm sorry that you had to wait for an answer to this one,
Regards!
no worries...and thanks - that solves resolves that little annoyance.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Is it possible to extend StockTools toolbar?

I'm glad that your problem is now resolved, but in case of any other issues feel free to contact us.

Have a good day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”