score:22

Accepted answer

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

score:0

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();
    });

score:5

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);

Related Query

More Query from same tag