claudios claudios - 25 days ago 8
Javascript Question

How to display tooltip data below x-axis category labels using Highcharts

I am trying to display the tooltip values below my x-axis category labels using Highcharts but won't work. I found below link but won't work.


How to show tooltip data below each column in Highchart?


What I have right now is:

xAxis: {
categories: ['7789 - 70', '7877 - 12', '7876 - 12', '7876 - 7', '7877 - 7', '7876 - 20', '7876 - 28', '7875 - 12', '7876 - 129', '7877 - 129'],
labels: {
formatter: function () {
return this.value+'<br>'+'{series.name}';
}
}
}


enter image description here

Working fiddle

Answer

This is a hack, but you can try, will try to find a better solution and post

xAxis: {
      categories: ['7789 - 70', '7877 - 12', '7876 - 12', '7876 - 7', '7877 - 7'],
      labels: {
        formatter: function() {
          console.log(this.chart.series);
          return this.chart.series[0].name;
        }
      }
    }