Highcharts: Add Dynamic Data to xAxis Label

Question

I am trying to include an additional piece of data in the xAxis label of a column chart in Highcharts. I've tried to zero in on adding the data using xaxis.labels.formatter but I'm missing something.

Here is a jsfiddle of what I've got so far:

https://jsfiddle.net/p4buj7j6/

You'll notice in the first series of data that I'm passing an additional named value: 'unique_users' .

I would like the xAxis label for the first column to read:

  Desktop
UUs: 266,141

Answer 1

You have to use chart load events to update chart xAxis categories

  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,
          }]
        });
      },
    }
  },

 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 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> 

Fiddle demo