Obtaining the chart’s default export options in Highcharts

A working example is available on jsfiddle. There are numerous charts, and upon clicking on any chart, a modal window appears. After that, a process is performed on clicking the save button. This feature allows setting up defaults for all the charts.


Question:

For my project, I rely on Highcharts. To conceal the
default dropdown
in the
export option
section of a chart, I utilize the following code.

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

In order to include the necessary export options in my own menu alongside other features, it’s important for me to have access to them. My understanding is that the default export options for a single chart are controlled by Javascript on the client side and not by the server.

How can I create JavaScript code to construct the export choices?


UPDATE

I have already added exporting.js to my webpage, but I wish to eliminate the automatic export dropdown and instead incorporate the export options into my own menu. To achieve this, I require information about the default
dropdown options
links or javascript used by the export dropdown so that I can replicate its functionality in my menu.

Thanks and regards.


Solution:

The export options that are set by default can be found in the exporting.src.js file.

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, '>');
        doc.body.innerHTML = '
' + svg + '

';
}
} // */
]

The term

this

pertains to the chart, and thus, it can be substituted with your own

chart

variable.

For example with JPEG exporting:

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

Or see this JSFiddle demonstration.

Frequently Asked Questions

Posted in Uncategorized