1

I am using Vue 3.9.3, along with highcharts-vue 1.3.5 . I am trying to put into an object each highchart, as it loads, so then I have access to any chart I want like

myCharts.aChart or

myCharts.anotherChart,

so I can easily do myCharts.anotherChart.addData

In practice I do,

<highcharts :constructor-type="'stockChart'" :options="options" :callback="chartcallback" ></highcharts>

and then

    data(){
      return{     
        charts:{}
      }
    },
  methods:{ 

       chartcallback(hc){
          let obj = {[hc.options.id] : hc};
          this.charts = Object.assign(this.charts, obj); 

          //also tried this 
          const newChart = {id:hc.options.id, chart : hc};
          this.$set(this.charts, newChart.id, newChart);

          //also tried this
           this.charts = Object.assign({}, this.charts, {
             [hc.options.id] : hc
           });

          //also tried this               
          this.charts[hc.options.id]= hc;

          console.log('test ', this.charts);
        } 
  }

and then I would watch my data and each time they change, I would add data to each highchart,

    watch: {
      myData: { 
        immediate: true,
        deep: true,             
        handler(){ 
            this.charts.NameChart.series[0].setData(this.myData[0], true);
            this.charts.DrinkChart.series[0].setData(this.myData[1], true);
            //etc....

this.charts.NameChart or this.charts.DrinkChart should be constructed in chartcallback and NameChart, DrinkChart is the value of hc.options.id hc.options.id always has a value and it is there, I checked.

The problem is

at the end of chartcallback where I do console.log('test ', this.charts);, the produced obj is

//first time
{NameChart:chart}

//second time
{NameChart:chart}

but it should be

//first time
{NameChart:chart}

//second time
{NameChart:chart,
DrinkChart:chart}

It looks like it overwrites the this.charts every time chartcallback is called. I tried several methods, as I note, but nothing works.

What can I do ?

Thanks

codebot
  • 517
  • 8
  • 29
  • 55

0 Answers0