Highcharts contextButton color

Question

I want to custom Highchart's export button. I read on their doc that we can easily access to the buttons style with buttons: { contextButton: ... } but it seems that I only can modify the symbol and I want to change the background color of the button too.

Here is an example on JSFiddle. As we can see, the symbol's color can be changed with symbolStroke option but how can I change the background ?

Answer 1

You need to change the theme node of the button. For example:

Full Example

    $(function () {
    $('#container').highcharts({

        chart: {
            backgroundColor: "white"
        },


        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }],

        exporting: {
            buttons: {
                contextButton: {
                    symbolStroke: "red",
                    theme: {
            fill:"gray"
        }
                }
            }
        }

    });
});

Source: http://api.highcharts.com/highcharts#exporting.buttons.contextButton.theme