b283
Posts: 25
Joined: Tue Aug 30, 2011 2:34 pm

chart.toolbar doesn't exist anymore in 2.2

Hello,

I use the chart.toolbar to add a reset button because I set the extremes after a chart reload.

chart.toolbar is not defined anymore

http://jsfiddle.net/b283/Q67MT/

Thanks
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: chart.toolbar doesn't exist anymore in 2.2

You can create button using renderer: chart.renderer.button().add();

Code: Select all

/**
	 * Create a button with preset states
	 * @param {String} text
	 * @param {Number} x
	 * @param {Number} y
	 * @param {Function} callback
	 * @param {Object} normalState
	 * @param {Object} hoverState
	 * @param {Object} pressedState
	 */
	button: function (text, x, y, callback, normalState, hoverState, pressedState) {
Paweł Fus
Highcharts Developer
b283
Posts: 25
Joined: Tue Aug 30, 2011 2:34 pm

Re: chart.toolbar doesn't exist anymore in 2.2

Hello,

I am sorry, I am not able to make it work.
Do you have a fiddle for that? I don't see this in the API ref.

Moreover, how can I remove this button?
It was possible with toolbar.

Thanks a lot
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: chart.toolbar doesn't exist anymore in 2.2

1) Example of creating button:

Code: Select all

function myCallback(){
    alert("button clicked");
}



chart.renderer.button('name of button',200,200,myCallback).add()
2) Another way to do that: http://highcharts.com/jsbin/ipusix/edit#javascript,live

To show/hide/remove elements I advice to use group - check here http://www.highcharts.com/ref/#renderer (g (String name) : Element - .hide() + .show() + .destroy() )
Paweł Fus
Highcharts Developer
b283
Posts: 25
Joined: Tue Aug 30, 2011 2:34 pm

Re: chart.toolbar doesn't exist anymore in 2.2

Thanks

I look at the Highchart's code to see what it is possible to do for styling and placement.
For the reset button, I made like this:

Code: Select all

chart.renderer.button('Reset zoom', null, null, chart.resetZoom, {
	zIndex: 20
}).attr({
	align: 'right',
	title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
	align: 'right',
	x: -10,
	y: 10
}, false, null);
It's not at the very same place as the default one, but it's ok as only one is displayed.

Return to “Highcharts Usage”