I need to add some custom buttons (with onclick events), without overwrite the exporting buttons value, 'cause I wanna include new buttons without lost the custom buttons previously defined in chart (my chart already has custom buttons defined), all this at runtime, in a Highcharts chart using this object:
$('container').highcharts()
Is this possible?
You can add custom buttons using the exporting object:
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
},
anotherButton: {
text: 'Another Button',
onclick: function () {
alert('You pressed another button!');
}
}
}
}
http://jsfiddle.net/NxK39/1/
EDIT: He wanted to add buttons after config
var chart = $('#container').highcharts();
normalState = new Object();
normalState.stroke_width = null;
normalState.stroke = null;
normalState.fill = null;
normalState.padding = null;
normalState.r = null;
hoverState = new Object();
hoverState = normalState;
hoverState.fill = 'red';
pressedState = new Object();
pressedState = normalState;
var custombutton = chart.renderer.button('button', 74, 10, function(){
alert('New Button Pressed');
},null,hoverState,pressedState).add();
new fiddle: http://jsfiddle.net/NxK39/2/ answer using technique from Highcharts: replace custom button image on hover
JS
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);
originally found here: http://forum.highcharts.com/viewtopic.php?f=9&t=15416
if you need to pass any information simply do the following:
chart.renderer.button('Reset zoom', null, null, function(){ myFunction(chart) }, {
zIndex: 20
}).attr({
align: 'right',
title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
align: 'right',
x: -10,
y: 10
}, false, null);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With