Posts: 5
Joined: Mon Jan 17, 2022 8:49 am

Highcharts problem: create a custom toolbar

Wed Jan 19, 2022 9:21 am

Anyone knows how to create this toolbar on highcharts javascript with all those buttons? my code is

Posts: 514
Joined: Tue Aug 24, 2021 1:32 pm

Re: Highcharts problem: create a custom toolbar

Fri Jan 21, 2022 5:15 pm


Thanks for contacting us with your question!

There is no such option to have a toolbar like this from the default. You can build it by yourself with available methods.

For creating a button you can use standard HTML elements or render them via SVGRenderer. ... rer#button

When it comes to styling you can do this via usual CSS or use Highcharts styledMode: ... yle-by-css

The first element on the toolbar is the range selector and the easiest way will be using build-in input or using an HTML element with setExtremes()method. ... etExtremes

The second one is (I suppose) the dropdown list with options on which series to pick. You can achieve that by f.e. update() method or setData(). ... ies#update ... es#setData

you can refresh chart in a similar way: ... art#update
or ... art#redraw

For "deleting" use destroy() ... rt#destroy

For export chart use exportChart() ... xportChart

Here is the demo with examples of export and tooltip buttons:

​If you have further inquiries, you may reach out to me at any time,
Magdalena Gut
Highcharts support engineer

Return to “Highcharts Stock”