Geek asks and answers

How to add tooltip to x axis labels in tall charts?

How to add tooltip to x axis labels in tall charts?

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

Currently tooltips are only shown at points in the chart, I want the user to also see the tooltip / user description when hovering over the x axis. Is it possible? Thanks

+3
source share
3 answers

In general, Highcharts does not support tooltip over tags.

However, you have two solutions:

+8

, div. jquery museOver.

formatter: function(){
    return "<div class='myClass'> " + this.value + "</div>"
}

,

+1

I think I found a simpler solution to this question that just includes Bootstrap and jQuery.

See http://jsfiddle.net/key2xanadu/zfsfz0c9/ .

The solution includes identifying puppy tags and then installing them at the bottom:

$('document').ready(function () { 
    $("#text_title").tooltip({placement: 'bottom', title:"HELLO TITLE!"});
    $("#label_one").tooltip({placement: 'bottom', title:"HELLO ONE!"});
    $("#label_two").tooltip({placement: 'bottom', title:"HELLO TWO!"});
});

The example also shows how to add tooltips to the title!

+1
source

More articles:


All Articles