Add Dynamic Data to x Axis Label - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

Add Dynamic Data to x Axis Label

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from   w w w.  j a  v  a  2s .  c  o m
Highcharts.chart('container', {
  chart: {
    height: 500,
    events: {
      load: function() {
        var cat_data = [];
        this.series[0].data.map((el) => {
          cat_data.push(el.category + '<br> UUs: ' + el.options['unique_users'])
        })
        this.update({
          xAxis: [{
            categories: cat_data,
          }]
        });
      },
    }
  },
  title: {
    text: 'Data'
  },
  xAxis: [{
    categories: ['Desktop', 'Smartphone', 'Tablet', 'Desktop & Smartphone', 'Smartphone & Tablet', 'Tablet & Desktop', 'All Devices'],
  }],
  yAxis: [{
    labels: {
      style: {
        color: '#fff'
      }
    },
    title: {
      text: 'Conversions',
      style: {
        color: '#fff'
      }
    },
    lineWidth: 0
  }, {
    labels: {
      style: {
        color: '#fff'
      }
    },
    title: {
      text: 'Frequency',
      style: {
        color: '#fff'
      }
    },
    opposite: true,
    lineWidth: 0
  }],
  series: [{
    name: 'Conversions',
    data: [{
      'unique_users': 266141,
      y: 16965544
    }, {
      'unique_users': 33386,
      y: 35020346
    }, {
      'unique_users': 124110,
      y: 7013713
    }, {
      'unique_users': 124110,
      y: 6247524
    }, {
      'unique_users': 103051,
      y: 4194179
    }, {
      'unique_users': 56536,
      y: 2243437
    }, {
      'unique_users': 73948,
      y: 1038735
    }],
    type: 'column'
  }, {
    name: 'Frequency',
    data: [2.0, 1.4, 2.7, 3.9, 2.7, 2.8, 6.3],
    type: 'spline',
    yAxis: 1
  }]
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials