Get axis name in tooltip on Highcharts

2
votes

I am using a bubble chart in Highcharts and I am trying to change the hover tooltip to show more meaningful output - at the moment I can get it to show the axis values but I cannot get it to show the labels.

I am using this in my plotoptions:

plotOptions: {
    bubble: {
        minSize: 1,
        maxSize: 40,
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x}:00 UTC on {point.y} => total of {point.z} tickets'
        }                   
    }       
}

and in my y axis I have:

yAxis:{
    categories: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"]
}

which displays as:

11:00 on 0 => total of 32 tickets

but I would like it to show the actual day in the label:

11:00 on Monday => total of 32 tickets

I have looked at formatter but then I cannot seem to access the z axis as it gives an undefined.

How can I use the y axis name in the tooltip?

http://jsfiddle.net/qvw5gurc/1/

1
highcharts
You may have to switch to tooltip.formatter, but not absolutely certain. - Halvor Holsten Strand

1 Answers

7
votes

As @Ondkloss said in their comment, use tooltip.formatter instead:

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br>' + this.point.x + ':00 UTC on ' + this.series.yAxis.categories[this.point.y] + '=> total on ' + this.point.z + 'tickets';
        }
    },

Updated fiddle.