Tooltip on Hover for X-Axis Labels
Posted: 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.
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...
Any guidance or recommendations would be super helpful, thanks!
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.
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>`;
}
}
}