vue2-highcharts - Cannot redraw chart to position pies

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!