Redraw Highchart series method. Vuejs

Question

Building reactive charts on Vuejs and Hightcharts. Got stacked, trying to make method for redraw().

I've tried this.chart.series[0].setData(this.values,true); but it doesn't work as I need to set the whole series instead of series.data. My series data format: [{"data": 'value', "name": 'value'}], but I only know how to redraw series data part. Any tips will be appreciated!

// My data format:
    values: [ 
    { "data": [ 6000000, 0, 0, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Shares A" }, 
    { "data": [ 9600000, 0, 0, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Shares B" }, 
    { "data": [ 0, 0, 4000000, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Share C" }, 
    { "data": [ 0, 5000000, 0, 0, 0, 0, 0, 0, 0, 0, { "isSum": true } ], "name": "Shares D" } 
    ]
    // Redraw method:
    methods:{
        redraw(){
            // this doesn't work, need help with this part 
            this.chart.series[0].setData(this.values,true);

            // I've also tried this way, but it redraws only 1st seria, not every of them
            this.chart.series[0].update({
                data: this.values[0].data,
                name: this.values[0].name
            }, true); 
        }
    },
    watch:{
        values(){this.redraw()},
    },
    series: this.values

Philipp Kishkovarov Philipp Kishkovarov · Accepted Answer · 2019-07-02T19:19:16

I finally found the solution:

methods:{
        redraw(){
            chart = this.chart

            if(chart.series.length > 1){
                var s = 0;
                for(var i in this.values){
                    chart.series[s].setData(this.values[i].data);
                    chart.series[s].name = this.values[i].name;
                    s++;
                }
            }else{
                this.chart.series[0].setData(this.values[0].data);
                this.chart.series[0].name = this.values[0].name;
            }
        }
    },

Redraw Highchart series method. Vuejs

1 Answers