CODEWITHSUNDEEP
javascriptjqueryhighcharts
Anup Singh
Anup Singh

Reputation: 1563

Highchart hide default buttons

I want to hide default buttons ("Export" & "Print") in highchart export options.

you can have demo at http://jsfiddle.net/fXHB5/3496/ in this link there are 3 buttons 1. Custom Button 2. Export button 3. print Button.

In this case I want to show only first button and hide "Export button" & "print Button"

Upvotes: 14

Views: 30252

Answers (6)

qxg
qxg

Reputation: 7036

As for current highcharts (7.2.1), you can hide them by setting option below

exporting: {
    buttons: {
        contextButton: {
            menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
        }
    }
}

Check API at https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

Upvotes: 0

kalpesh
kalpesh

Reputation: 1287

If you are using a framework then you can hide by this way.

    HIOptions *options = [[HIOptions alloc]init];
    HIExporting *exporting = [[HIExporting alloc]init];
    exporting.enabled = [[NSNumber alloc] initWithBool:false];
    options.exporting = exporting;

Upvotes: 0

hitesh kaushik
hitesh kaushik

Reputation: 41

if you just want to hide default custom buttons,you could simply use:

exporting: {
      buttons: {
        contextButton: {
          enabled: false
        },
        printButton: {
            enabled: false,
        },
      }
    }

If you want to use your own custom button or label you can use this:

exporting: {
      buttons: {
        contextButton: {
          enabled: false
        },
        exportButton: {
            text: `Chrome`,
            _titleKey: "yourKey",
            onclick:function(){
            alert('clicked Chrome');
            },
            x:-410
        },

        printButton: {
            enabled: false,
            text: `IE: `,
             _titleKey:"myKey",
            onclick: function () {
                alert('clicked IE');
            },
            x:-400,
            y:30
        },          
      }
    },

in this i have disabled default as well as printButton, you can use x and y to set the positions of the label. You can find my code in fiddle here : https://jsfiddle.net/m3yegczx/20/

Upvotes: 0

Forever Nomad
Forever Nomad

Reputation: 413

For anyone else who is using a newer version of highcharts and the selected answer doesn't work, you need to use the below instead to hide the button.

exporting: {
        buttons: {
            contextButton: {
                enabled: false
            }    
        }
    }

Upvotes: 22

GGG
GGG

Reputation: 817

you can access each button preference with something like this:

exporting: {
    buttons: {
        printButton: {
            symbol: 'circle'
        },
        exportButton: {
            enabled: false
        }    
    }
}

an expandable example with your custom button would be:

exporting: {
    buttons: {
        printButton: {
            enabled: false
        },
        exportButton: {
            enabled: false
        },
        custom: {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function () {
                alert('click!')
            }
        }
    }
}

Upvotes: 19

Bill
Bill

Reputation: 25555

It's not possible as an option, but you can hide the default buttons then create your own using html. Then you can bind your custom button as you need.

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    credits: {
        enabled: false
    },

    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: {
            enabled: false
        }
    });

console.log( Highcharts.Renderer.prototype.symbols )​

Upvotes: 6

Related Questions