How to include data from point in Highcharts xAxis label?

Question

I am trying to include some extra data from my points in the xAxis label of a Highcharts line chart.

I'm creating my points like this. xAxis is 'datetime' type, and I'm using custom tickPositions (this part works fine).

for (row of results) {
    var point = {x:Date.parse(row.time), y:row.value, magicNumber:row.ID};
    data_series.data.push(point);
    chartConfig.xAxis.tickPositions.push(Date.parse(row.time));
}

In the tooltip I'm able to do the following (this works):

tooltip: {          
    formatter: function() {
        return 'ID: ' + this.point.magicNumber + '  Value:' + this.point.y.toFixed(3);
    },
},

How do I do the equivalent in the xAxis formatter? Not clear from the docs if this is possible.

 xAxis: {
        type: 'datetime',
        labels: {
            rotation: 90,    
            formatter: function () {
                var ID = **What goes here to obtain magicNumber?** 

                var datetime = new Date(this.value);
                return ID.toString() + ' ' + datetime.toISOString();
            }
        },

        tickPositions: []
}

Answer 1

Try this, console.log(this); should give you a hint if my solution doesn't works.

 xAxis: {
    type: 'datetime',
    labels: {
        rotation: 90,    
        formatter: function () {
            console.log(this);
            var ID = this.chart.series[0].data[this.pos].magicNumber;

            var datetime = new Date(this.value);
            return ID.toString() + ' ' + datetime.toISOString();
        }
    },

    tickPositions: []

}

Answer 2

Both formatters has different context, so one way out of that is by iterate on every point of your data (inside of the xAxis.labels.formatter function), find the point which has the same x as this.value, and assign it to some variable. It should be enough, but there is a likelihood of a returning empty object, when none of points won't fit to the tick value.

      xAxis: {
        type: 'datetime',
        labels: {
          formatter() {
            var points = this.chart.userOptions.series[0].data

            var sameTimestampPoint = points.filter(p => p.x === this.value)[0]
            var magicValue = sameTimestampPoint ? sameTimestampPoint.magicValue : ""

            return magicValue + '<br/>' + this.value 
          }
        }

      }

Live example: https://jsfiddle.net/2r8z5wny/