Vue2-Highcharts setOptions Lang

Question

I'm trying to do a standard translation for highcharts with Vue2, but I'm having difficulty because I can not access the setOptions option. I do not find much documentation of vue2 with Highcharts, so I'm having some difficulties working with it, if anyone can also provide me with that content, thank you.

import VueHighcharts from 'vue2-highcharts'
export default{
    components: {
        VueHighcharts
    },
    props: ['title', 'subtitle', 'initoptions'],
    data(){
        let initOptions = JSON.parse(this.initoptions);
        let tmpSeries = [];
        let count = 0;

        $.each(initOptions, function(key, value) {
            let data = [];
            $.each(value, function(key2, value2){
                let date = key2.split('-');
                data.push([Date.UTC(date[2], date[1], date[0]), value2]);
            });

            tmpSeries.push({'name': key, 'data': data});
            count++;
        });

        return{
            options: {
                /* ***
                  I can not set this setOptions property to lang
                *** */
                lang: {
                    loading: 'Aguarde...',
                    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
                    shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    exportButtonTitle: "Exportar",
                    printButtonTitle: "Imprimir",
                    rangeSelectorFrom: "De",
                    rangeSelectorTo: "Até",
                    rangeSelectorZoom: "Periodo",
                    downloadPNG: 'Download imagem PNG',
                    downloadJPEG: 'Download imagem JPEG',
                    downloadPDF: 'Download documento PDF',
                    downloadSVG: 'Download imagem SVG'
                },
                chart: {
                    type: 'spline'
                },
                title: {
                    text: this.title || ''
                },
                subtitle: {
                    text: this.subtitle || ''
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        day:'%e/%m',
                        week:'%e/%m',
                        month: '%m/%y',
                        year: '%m'
                    },
                    title: {
                        text: 'Date'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Total'
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 8,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: tmpSeries
            }
        }
    }
}  

I hope someone can help me, thank you.

Answer 1

I'm not sure with this package but with the Official Vue Highcharts you can set options like that :

import Highcharts from 'highcharts';

import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

Highcharts.setOptions({
    lang: {
        decimalPoint: '.',
        drillUpText: 'Back',
        noData: "Check your options please",
        resetZoom: 'Reset',
        thousandsSep: ' '
    }
});

import HighchartsVue from 'highcharts-vue';
Vue.use(HighchartsVue);