I am using highcharts to create various charts, and I also have a monthpicker so that the user can choose the month for which data will be shown on the chart. Each time the user picks a different date, a new chart is loaded. Since the 'exporting: filename' is set only once during the initialization of the chart, each time the user uses the export as CSV option the downloaded file has the name that has been set during the initialization of the chart.

I have added a var in the 'exporting: filename' option to read the value of the monthpicker, using this:

var Name = $("#date_picker").val();

exporting: {enabled: true,
            filename: "Monthly Report: - " + Name + ""
           }

but it does not update the filename when the user picks a different month from the one that is set during the initial page load.

I have also tried adding a button to run the downloadCSV script and update the filename this way:

var Name = $("#date_picker").val();
document.getElementById('button1').addEventListener('click', function () {
        highcharts.chart("report_chart").update({
                events: {
                    load: function () {
                        this.update({
                            exporting: {
                                filename: "Monthly Report - " + Name + ""
                            }
                        });
                    }
                }
             });
    });

but it has not worked out the way I want it to.

Is there a way to update dynamically the filename of the CSV that is exported so that it includes the month that the user has picked in the date picker?