CODEWITHSUNDEEP
javascriptvue.jshighcharts
codebot
codebot

Reputation: 697

Highcharts-Vue chart options does not change values after it is set

I am using highcharts-vue to have Highcharts in my Vue project.

A) First of all, in javascript the following works

let b =5;
let data = {
    a:b
}
console.log('data', data.a);

Log says 5, the value of b

In Vue and highcharts I try to have the same logic. Set highcharts in the vue template, set its options empty at first then try to give numbers to series. Template is <highcharts ref="chart" :callback="chartcallback" :options="options" ></highcharts>

and then use Vue

B) set variables as empty arrays, pass them to options and use those variables to update options in vue

    data(){
      return{     
        series:[],  
        options: {  
          series: this.series,
       }
     }
   }

Then, in Vue , if I do 

console.log(this.options.series);
     this.series.push({ 
          name:'hello',
          data:[]
      });
console.log(this.options.series);

Set options.series as a var, change the var and the options.series will also change. First log says undefined, second is an empty array, but I just pushed name and data in it. This confuses me because it is just like A), in javascript this works. Here it does not. Is it because of Vue or Highcharts?

Another way I tried is

C) set options as empty, set vars, equal options to vars

    data(){
      return{      
        options: {  
          series: [],
       }
     }
   }

Then, in Vue , if I do 

console.log(this.options.series);
     this.series.push({ 
          name:'hello',
          data:[]
      });
     this.options.series = this.series
console.log(this.options.series);

This works, but I dont get why. First log is an empty array, second log has name and data. If setting options and then setting a var equal to it, why B) does not work? I also set a var to options , but in a different time.

Please, I want to understand why B that looks like A doesnt work. Also why C works, since I set options.series to a var, after options is created

Thank you

Upvotes: 1

Views: 823

Answers (2)

daniel_s
daniel_s

Reputation: 3732

In Vue and highcharts I try to have the same logic.

Not really, and I would try to explain it as clear as I can. Doing this:

    data(){
      return{     
        series:[],  
        options: {  
          series: this.series,
       }
     }
   }

It doesn't work as you expecting, because when refer this.series, that array is actually not already defined in component. The reason is that the Vue defines all component data only after returning a whole data object, so you should not use this to refer other component data within data definition.

In the second case:

    data(){
      return{      
        options: {  
          series: []
       }
     }
   }

console.log(this.options.series);
this.series.push({ 
  name:'hello',
  data:[]
});
this.options.series = this.series
console.log(this.options.series);

First log returns an empty array, because as you can see it is defined on init. After that you're pushing new objects into this.series array (which I suspect is defined as empty array in your component data), and then just assigning it to options.series, what is totally correct.

I hope this description brighten both cases enough to you.

Upvotes: 0

Bernardo Marques
Bernardo Marques

Reputation: 1055

I think this is a Javascript scope 'problem', in example B) you run console.log(this.options.series) and logs series from options, but you call method push only to this.series, you're on diferent scopes.

On C) attempt you had 2 difent scopes but than you run this.options.series = this.series, that`s why it works that time.

Upvotes: 1

Related Questions