How do I add a tooltip to the x-axis labels in highcharts?

Question

How do I add a tooltip to the x-axis labels in highcharts?

xAxis: {
  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
  labels: {
    x: 5,
    useHTML: true,
    formatter: function () {
      return categoryImgs[this.value];
    }
  }
}

Currently, tooltips are only shown on the points in the chart, I want the user to also see a tooltip/custom description when hovering on the labels on x-axis. Is that possible? Thanks

Answer 1

In general Highcharts doesn't support tooltip on labels.

However you have two solutions:

• use Custom-events plugin, to add event on labels: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events (demo has click, mouse over should work the same to display custom tooltip)
• use some plugin (Tooltipsy etc.), like this: http://jsfiddle.net/gW4p6/196/