Highcharts applying custom style to context button using css class

Question

I have a large set of Highcharts graphics that all use the exporting.js library for downloading in various formats. I would like to customize the context button on these charts to match the native styles of the application.

Although I have found several examples of how to achieve this within the confines of the Highcharts chart-level script (ie THIS EXAMPLE ) it seems rather repetitive to implement these styles in every chart knowing that I have a large set to be affected.

I realize this could potentially be achieved using a global theme in Highcharts, however I am still limited by the configuration options of the library itself.

For instance this would be the suggested path:

var chartingOptions = {
exporting: {
    buttons: {
        'myButton': {
            id: 'myButton',
            symbol: 'circle',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF'
        }
    }
}

But unfortunately it does not provide a lot of expressivity.

Am I able to define a css style and pass it to the global theme or chart set using its ID or CLASS somehow?

Answer 1

Yes, you can set class or id of button using theme property.

buttons: {
    'myButton': {
        symbol: 'circle',
        symbolFill: '#B5C9DF',
        hoverSymbolFill: '#779ABF',
        theme: {
            class: "myButton highcharts-button highcharts-button-normal",
            id: "myDiamondButton"
        }
    }
}