vue2-highcharts - Cannot redraw chart to position pies - highcharts

Question

Im ploting a 3-pie chart as a single Highchart in a resizable container with VueJs and vue-highcharts component.
To do this, I need then to redefine my pies positions and sizes when the container is resized. Im having a huge struggle in redrawing the pies after I alter my series positions and sizes. Here's some code:
<template>
<div class="multiple-pie-wrapper" ref="root">
<vue-highcharts style="height: 100%; width: 100%;" :Highcharts="Highcharts" :options="options" ref="chart"></vue-highcharts>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts';
import Highcharts from 'highcharts';
export default {
props: {
options: { type: Object, required: true }
},
data: function () {
return {
Highcharts: Highcharts
};
},
components: {
VueHighcharts
},
methods: {
reflow: function() {
var series = this.options.series;
//... Calculate the new positions and sizes and set it to
// series[i].size and series[i].center
// HERE IS WHERE I SHOULD REDRAW IT
}
},
mounted() {
this.reflow();
}
}
</script>
The highchart options:
{
"title":{
"text":"3 Pies"
},
"credits":{
"enabled":false
},
"exporting":{
"enabled":false
},
"series":[
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":true
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
}
]
}
I have tried the following without success:
this.$refs.chart.chart.redraw()
this.$refs.chart.chart.reflow()
series[i].setData(series)
None of them have any effect and my pies are plotted as if the center and size are the default ones (therefore, overlaping each other).
Any ideas?

Answer 1

I've created a method that does graph redesign.
reloadTypeSeries(){
let pizzaCharts = this.$refs.pizzaCharts;
let updateSeries = JSON.parse(this.updateoptions);
let concatJson = [];
$.each(updateSeries, function(key, value) {
concatJson = concatJson.concat([[updateSeries[key].name, updateSeries[key].y]]);
});
pizzaCharts.chart.series[0].setData(concatJson, true);
}
Hope this helps!