x axis categories updating dynamically in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

x axis categories updating dynamically in bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Vue Highcharts example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.6/highcharts.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  ww  w  .  ja va2s.c o m*/
new Vue({
   el: '#app',
   data() {
     return {
      chart: null,
      categories: []
    }
  },
  mounted() {
    this.drawChart()
     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: ''
      }
    }
  })
      }
    }
})
    }

      </script> 
   </head> 
   <body> 
      <div id="app"> 
         <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> 
      </div>  
   </body>
</html>

Related Tutorials