austinnolfi
Posts: 7
Joined: Tue Jan 25, 2022 6:41 pm

Tooltip on Hover for X-Axis Labels

Thu Jan 27, 2022 5:17 pm

Hello, I'd like to implement a way to display a tooltip of text according to which x-axis label I hover over.
For example, I'd like to have a tooltip with the text "Quarter 1 is January 1 - March 31" appear when hovering the mouse on x-axis label "Q1 2016".
See the embedded image.
Image

As of right now, all I have is jQuery that gives all of the labels on the X-axis an id associated to them. Not sure if this will prove to be helpful...

Code: Select all

xAxis: {
    categories: ['Q1 2016', 'Q2 2016','Q3 2016','Q4 2016',
    'Q1 2017', 'Q2 2017','Q3 2017','Q4 2017'
    ],
    tickInterval: 1,
    title: {
      text: 'Months (quarters)'
    },
    labels:{
    	useHtml: true,
      formatter: function () {
                  return `<p id='xAxis${this.value.substring(0,2)}'>${this.value}</p>`;
    	}
    }
  }
  
Any guidance or recommendations would be super helpful, thanks!

mateusz.b
Posts: 1896
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip on Hover for X-Axis Labels

Fri Jan 28, 2022 2:04 pm

Hi austinnolfi,

Welcome to our forum and thanks for contacting us with your question!

Something like that is not implemented in Highcharts. However, you can do this with Custom events plugin.
Demo: http://jsfiddle.net/BlackLabel/k43rfmws/

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”