Disable PDF and SVG download options in Highcharts - 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 Chart as JPG
Download Chart as PNG
However, the standard options are:
Print Chart
Download Chart as JPG
Download Chart as PNG
Download Chart as PDF
Download Chart as SVG Vector Graphic
How can I customise it so that it just gives the user JPG and PNG options?

Answer 1

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 2

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