samela.lorenzo
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 http://jsfiddle.net/e5m2h1wk/1/
Image

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

Re: Highcharts problem: create a custom toolbar

Fri Jan 21, 2022 5:15 pm

Hi,

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.
https://api.highcharts.com/class-refere ... rer#button

When it comes to styling you can do this via usual CSS or use Highcharts styledMode:
https://www.highcharts.com/docs/chart-d ... 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.
https://api.highcharts.com/class-refere ... 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().
https://api.highcharts.com/class-refere ... ies#update
https://api.highcharts.com/class-refere ... es#setData

you can refresh chart in a similar way:
https://api.highcharts.com/class-refere ... art#update
or
https://api.highcharts.com/class-refere ... art#redraw

For "deleting" use destroy()
https://api.highcharts.com/class-refere ... rt#destroy

For export chart use exportChart()
https://api.highcharts.com/class-refere ... xportChart

Here is the demo with examples of export and tooltip buttons:
http://jsfiddle.net/BlackLabel/guwc1mha/

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

Return to “Highcharts Stock”