highcharts x axis categories not updating dynamically vuejs - highcharts

Question

Below is the highchart application iam working.In mounted i will call axios post that will fetch x axis lables as array.But the x axis categories of highchart is not updating with the given array
Below is the code
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 600px; margin: 0 auto"></div>
</div>
</div>
</div>
</template>
<script>
var $ = require('../../node_modules/jquery/dist/jquery.js')
var Highcharts = require('highcharts')
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts)
// Create the chart
$(function () {
Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {enabled: false},
exporting: {enabled: false},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: [],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
})
export default {
data () {
return {
}
},
mounted () {
//will fetch labels from db
var arr = ['computers', 'games']
this.catList = arr
}
}
</script>
<style scoped>
.container{
margin: 0 auto;
}
#container{
margin: 0 auto;
min-width: 100%;
padding: 0;
max-width:100%;
height: 400px;
margin: 0 auto;
}
</style>
Please give solution to above problem.

Answer 1

To make categories reactive, you should put Highchart code inside component
Note that in xAxis config, we need to put categories: this.categories
new Vue({
el: '#app',
data() {
return {
chart: null,
categories: []
}
},
mounted() {
this.drawChart()
// example after pull data
var arr = ['computers', 'games']
const vm = this;
setTimeout(function() {
vm.categories = arr
vm.drawChart()
}, 2000)
},
methods: {
drawChart() {
if (this.chart) {
this.chart.destroy();
}
this.chart = Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {
text: null
},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: this.categories,
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
}
}
})
Working example: https://jsfiddle.net/a9eqd8th/