Highcharts: how to get the default export options on a chart?

Question

I am using Highcharts for my project. I use the following to hide the default dropdown for the export options of a chart:

$('#mycontainer").highcharts({
   ...
   chart: {
      type: 'column'
   },
   exporting: {
     enabled: false
   }
   ..
});

However, I do need these export options and I need to put them in my own menu together with other things. If I am right, the default export options on a single chart are basically Javascript-driven on the client side and has nothing to do with the server.

How can I rebuild these export options and put them in javascript?

UPDATE

exporting.js is already included in my page, but I want to disable the default export dropdown it generates and move the default dropdown export options into my own menu. I need to know what the default dropdown options links or javascript are so that I can make my menu work the same way the default export dropdown does.

Thanks and regards.

Are you looking for <script src="code.highcharts.com/modules/exporting.js"></script> — Swetha
Swetha, I know of this script. It is already included in my page. But I don't want the default export dropdown generated by exporting.js. I hope to put add the defaul export dropdown options into my own menu. Thanks! — curious1

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2014-09-18T02:25:52

The default export options are (directly from the exporting.src.js):

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'
        });
    }
}
// Enable this block to add "View SVG" to the dropdown menu
/*
,{

    text: 'View SVG',
    onclick: function () {
        var svg = this.getSVG()
            .replace(/</g, '\n&lt;')
            .replace(/>/g, '&gt;');

        doc.body.innerHTML = '<pre>' + svg + '</pre>';
    }
} // */
]

Here this refers to the chart itself, so you could replace it with your chart variable.

For example with JPEG exporting:

var chart = $('#container').highcharts();
chart.exportChart({
    type: 'image/jpeg'
});

Or see this JSFiddle demonstration.

Highcharts: how to get the default export options on a chart?

1 Answers