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

Tooltip on Hover for X-Axis Labels

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: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip on Hover for X-Axis Labels

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”