[Vuejs]-Highcharts x axis categories not updating dynamically vuejs

by

4👍

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/

👤ittus

Leave a comment