Disable PDF and SVG download options in Highcharts

Question

I am using Highcharts v4.0.3 with exporting.js in my web app, and I want to be able to just provide the end user with the following download options:

• Download Char

Answer 1

You can remove unnecessary options the following way:

if (Highcharts.getOptions().exporting) {
    let contextButton = Highcharts.getOptions().exporting.buttons.contextButton;
    contextButton.menuItems = contextButton.menuItems.filter((item) => {
        return item.textKey === 'downloadJPEG' || item.textKey === 'downloadPNG';
    });
}

Answer 2

You can manually set exporting.buttons.contextButton.menuItems (API) to contain whatever buttons you want.

You'll want to set it to only contain JPG and PNG like this (short form, textKey only):

menuItems: ['downloadPNG','downloadJPEG']

Or for more explicit function calls (long form with objects and onclick):

menuItems: [{
    textKey: 'downloadPNG',
    onclick: function () {
        this.exportChart();
    }
}, {
    textKey: 'downloadJPEG',
    onclick: function () {
        this.exportChart({
            type: 'image/jpeg'
        });
    }
}]

As in these JSFiddle demonstrations: short form and long form.

The default for exporting.js is:

menuItems: [{
    textKey: 'printChart',
    onclick: function () {
        this.print();
    }
}, {
    separator: true
}, {
    textKey: 'downloadPNG',
    onclick: function () {
        this.exportChart();
    }
}, {
    textKey: 'downloadJPEG',
    onclick: function () {
        this.exportChart({
            type: 'image/jpeg'
        });
    }
}, {
    textKey: 'downloadPDF',
    onclick: function () {
        this.exportChart({
            type: 'application/pdf'
        });
    }
}, {
    textKey: 'downloadSVG',
    onclick: function () {
        this.exportChart({
            type: 'image/svg+xml'
        });
    }
}]

The additional ones for export-data.js are:

menuItems: [{
    textKey: 'downloadCSV',
    onclick: function () {
        this.downloadCSV();
    }
}, {
    textKey: 'downloadXLS',
    onclick: function () {
        this.downloadXLS();
    }
},{
    textKey: 'viewData',
    onclick: function () {
        this.viewData();
    }
},{
    textKey: 'openInCloud',
    onclick: function () {
        this.openInCloud();
    }
}]

Answer 3

In chatOptions we can write customize options in the high-charts menu we can customize the dropdown options.
In chart options, we can write like:

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

Example: click here
Reference: click here