Data updated but table won't redraw

[Rodglenn Chris Rojas]

I am using Laravel Vue JS and I am updating my data using axios. So far, the data gets updated but the chart won't redraw.

<template>

    <div>
        <highcharts :options="chartOptions" ref="chart"></highcharts>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                chart: undefined,
                data:{
                    males: '',
                    females: '',
                },
                loading: true,
                chartOptions: {
                    title:{
                        text: 'Applicants Account by Gender'
                    },
                    chart:{
                        type: 'column'
                    },
                    yAxis: {
                        title: {
                            text: 'Number of Applicant Accounts'
                        },
                        tickInterval: 2,
                        crosshair: true,
                    },
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,
                                inside:true,
                            }
                        }
                    },
                    series: [{
                        name: 'Male',
                        data: []
                    },
                    {
                        name: 'Female',
                        data: [],
                        color: 'pink',
                    }]
                }
            }
        },
        methods:{
            async loadApplicantsPerGender(){
                await axios.get("/api/dashboard/applicantsPerGender").then(res =>{
                    this.data.males = res.data.males;
                    this.data.females = res.data.females;
                    this.loading = false;
                })
            },
        },
        async created(){
            await this.loadApplicantsPerGender();
            setTimeout(function(){ 
                this.message = 'Data Fetched';
                this.chartOptions.series[0].data = this.data.males;
                this.chartOptions.series[1].data = this.data.females;
            }.bind(this), 3000);
        }
    }
</script>

[Daniel Studencki]

Hi @bushidosnap ,

Thank you for contacting us. Could you provide me with a minimal demo example, where the problem occurs, so that I would be able to investigate it?

Kind regards!

[Rodglenn Chris Rojas]

Thank you for your reply, I was really stuck and desperate for answers but I was able to solve the issue, all I did was to make sure that I am passing the correct data type to series.data which should be an array.

I hope I can delete this.