Page 1 of 1

Highcharts problem: create a custom toolbar

Posted: Wed Jan 19, 2022 9:21 am
by samela.lorenzo
Anyone knows how to create this toolbar on highcharts javascript with all those buttons? my code is http://jsfiddle.net/e5m2h1wk/1/
Image

Re: Highcharts problem: create a custom toolbar

Posted: Fri Jan 21, 2022 5:15 pm
by magdalena
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!