Highcharts tooltip formatter

Question

For this.x, I am getting the index location when I push the data in via code. If I populate the data separately, like the following code, then this.x returns the right item. How can I fix this issue?

Works

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
}]

Index location is getting pushed out for this.x here

var points = [{
    Name: 'good',
    Y: '15000'
}, {
    Name: 'baad',
    Y: '3000'
}, {
    Name: 'wow',
    Y: '2000'
}];

var chartData = {
    GetChartSeries: function (points, name) {

        var seriesData = [];
        if (points != null && points != 'undefined') {
            for (i=0; i<points.length; i++) {
                seriesData.push({
                    name: ""+points[i].Name,
                    y: parseFloat(points[i].Y)
                    //,color: ''
                });
            }
        }
        return seriesData;
    }
};


$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            margin: [ 50, 50, 100, 80],
            borderColor: '#A4A4A4',
            borderRadius: 5,
            borderWidth: 2
        },
        legend: { 
            enabled: false 
        },
        title: {
            text: 'Graduation Year Breakdown'
        },
        colors: ['#790000'],
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                /*
                dataLabels: {
                    enabled: true,
                    color: 'red'
                },
                */
                borderRadius: 3,
                colorByPoint: true
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
                    'in year: '+ this.x;
            }
        },
        xAxis: {
            categories: [],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of Students'
            }
        },
        series: [{
            //name: 'Population',
            data: chartData.GetChartSeries(points, ""),//[4000, 3400, 2000, 34000, 120000],                 
            dataLabels: {
                enabled: true,
                //rotation: -90,
                color: '#4F4F4F',
                align: 'center',//'right',
                //x: 4,
                //y: 10,
                style: {
                    fontSize: '12px',
                    //fontWeight: 'bold',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

        }]
    });
});

Answer 1

While I am uncertain as to why your solution doesn't work, I can propose an alternative solution.

The tooltip formatter function has access to a number of different parameters. Instead of this.x, you could use this.point.name.

For example:

formatter: function() {
    // If you want to see what is available in the formatter, you can
    // examine the `this` variable.
    //     console.log(this);

    return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
        'in year: '+ this.point.name;
}