Highcharts pass external variable to global options

First time working with highcharts-vue.

I have the following global chart options, which I import in my app.js. It is here I have added a button to the exporting menu to allow for download CSV / XLSX functionality, leveraging maatwebsite/laravel-excel, as the final export will include additional columns to shown on the chart (as opposed to just downloading the chart data via its CSV/XSLX plugins).

I would like to pass the url into the exporting button drop-list on the chart, but I have not been successful. How do I pass a prop (the destination url for the data request) to this config?

I have multiple chart instances on a page and each would require its own target url.

Any suggestions welcome.

export const highChartConfig = function(page) {
    return {
        credits: {
            enabled: false
        },
        title: {
            align: 'center',
            style: {
                color: "#4B5563",
                fontSize: "16px",
                fontWeight: "300",
            },
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: [{
                        textKey: 'printChart',
                        onclick: function () {
                            this.print();
                        }
                    }, {
                        separator: true
                    },{
                        textKey: 'downloadCSV',
                        onclick: function () {

                            // THIS PROP I WOULD LIKE TO PASS TO THIS POINT. I GET UNDEFINED HERE
                            console.log(this.downloadCsvRoute)

                            if (this.downloadCsvRoute && this.downloadCsvRoute != '') {   
                                axios.get(this.downloadCsvRoute)
                            }
                        }
                    }]
                }
            }
        },
    }
}

Answer

The this keyword in onclick callback function refers to a chart, use arrow function to get the external this reference:

buttons: {
  contextButton: {
    menuItems: [..., {
      textKey: 'downloadCSV',
      onclick: () => {

        if (this.downloadCsvRoute && this.downloadCsvRoute != '') {
          axios.get(this.downloadCsvRoute)
        }
      }
    }]
  }
}

---

API Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions