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

Deep 3015 Deep 3015 · Accepted Answer · 2018-02-03T05:33:15

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

Highcharts: Add Dynamic Data to xAxis Label

1 Answers