Does anyone know how to dynamically add or remove an "exporting" button in highcharts?

I've been able to successfully add a button using code similar to this:

exporting: {
        buttons: {
            customButton: {
                text: 'Custom Button',
                onclick: function () {
                    alert('You pressed the button!');
                }
            }
        }
    }

But I'd like to be able to add the button onto the graph later through a javascript event (and then remove it soon after).

Does anyone know how to dynamically add or remove an "exporting" button in highcharts?

I've been able to successfully add a button using code similar to this:

exporting: {
        buttons: {
            customButton: {
                text: 'Custom Button',
                onclick: function () {
                    alert('You pressed the button!');
                }
            }
        }
    }

But I'd like to be able to add the button onto the graph later through a javascript event (and then remove it soon after).

• javascript
• highcharts

• 1 You can add button and function by renderer stackoverflow./questions/15472330/… – Sebastian Bochan Commented Aug 23, 2013 at 9:39

1 Answer 1

Using the direction Sebastian provided, I was able to fully solve this.

Documentation for adding buttons via renderer is found here (no info is in the highcharts official api unfortunately): http://forum.highcharts./viewtopic.php?f=9&t=15416

Here is the important part:

/**
* 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) {}

Here is the code I used:

hChart is the highcharts master object.

hChart.drillupCustomButton = hChart.renderer.button(
            'DRILL BACK UP', 
            100, 
            7, 
            function(){
                //run whatever code you want here for when button is clicked
                //This next line of code is how you remove the button (I chose to remove the button when the button is clicked)
                $(hChart.drillupCustomButton.element).remove();
                //You could also remove it via the id like this
                $('#drillupCustomButtonID').remove();
            }, 
            null, 
            null, 
            null
            )
            .attr({
                id: 'drillupCustomButtonID'
            })
            .add();