CODEWITHSUNDEEP
highcharts
mickburkejnr
mickburkejnr

Reputation: 3690

Disable PDF and SVG download options in Highcharts

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:

However, the standard options are:

How can I customise it so that it just gives the user JPG and PNG options?

Upvotes: 9

Views: 10429

Answers (3)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

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();
    }
}]

Upvotes: 26

Krishna Pvs
Krishna Pvs

Reputation: 41

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

Upvotes: 1

Mikhail Maksyutin
Mikhail Maksyutin

Reputation: 21

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';
    });
}

Upvotes: 2

Related Questions