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?

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?

• javascript
• jquery
• highcharts

3 Answers 3

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

This seems much more clean (due to being able to align properly):

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 want to use some custom HTML:

this._chart = new Highcharts.Chart(container, options, chart => {
        chart.renderer.text('<span class="material-icons">settings</span>', 15, 335, true)
            .attr({ zIndex: 3 })
            .add();
    });