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