Tooltip headerFormat yaxis index

[dking]

I cannot figure out how to get the index of the yaxis in the header of the tooltip.

I am using the headerFormat and footerFormat because the tooltip is shared and I am dynamically pushing/popping series based on user interaction. Attempting to put the header in the pointFormatter it then duplicates the header for each series that is added to the page.

sample of code:

tooltip: {
shared: true,
useHTML: true,
padding: 0,
pointFormatter: function() {
// console.log(this.series);
var min = this.series.points[0].y ? this.series.points[0].y : 0;
var percentChange = min != 0 ? ((this.y - min) / min) * 100 : 100;
var valueChange = this.y - min;
return '<tr><td class="px-2 py-1" style="color:' + this.series.color +'">' + this.series.name + ': </td>' +
'<td class="text-end px-2 py-1 fw-bold">' + this.y.toLocaleString() + '</td>' +
'<td class="text-center px-2 border-start">' + percentChange.toFixed(1) + '%</td>' +
'<td class="text-end px-2">' + (valueChange <= 0 ? "" : "+") + valueChange.toLocaleString() + '</td></tr>'
},
headerFormat: '<table><thead><tr><th class="px-2 border-bottom border-light-500 bg-abblue-600 text-white" colspan="2">{point.key:%a %b %e, %Y}</th>' +
'<th class="text-center px-2 border-bottom border-start border-light-500 bg-abblue-600 text-white" colspan="2">Change over {point.index} day(s)</th></tr></thead><tbody>',
footerFormat: '</tbody></table>',
},

[mateusz.b]

Hello dking,

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

You can get that index by referring to series.options.yAxis in headerFormat. To get it to work you need to set yAxis index in series options though.
Demo: https://jsfiddle.net/BlackLabel/Lncspejq/
API reference: https://api.highcharts.com/highcharts/t ... aderFormat,
https://api.highcharts.com/highcharts/series.line.yAxis

Let me know if that was what you were looking for!
Best regards!

[dking]

Thanks for the quick reply. I guess that's not what I'm looking for. That index is always 0. Because the data I'm building is x number of days incremented by 1 day I was trying to get the day number for the point.

headerFormat: 'Change over {series.options.yAxis} day(s)' is always 0.

I guess I'm looking for the xAxis index?
Trying {series.options.xAxis} returns nothing.

Am I looking for the category index?

[mateusz.b]

Hi dking,

Initially I thought that you want to show index of Y axis as it is stated in your first question, but now if I understood correctly, you want to show the index of the hovered point. It has nothing to do with any of axes. You can access that value with {point.index}.
Demo: https://jsfiddle.net/BlackLabel/au4ch28p/

Let me know if that was what you were looking for!
Best regards!

[dking]

Yes, that is what I'm looking for.

However, your example is using highStock. When I change that to Highcharts it does not work. I'm using Highcharts.

[dking]

Demo: https://jsfiddle.net/thetoad01/c7txyvr2/11/

[mateusz.b]

Hi dking,

For regular chart constructor the reference is slightly different: '{point.point.index}'
Demo: https://jsfiddle.net/BlackLabel/xvs0mkef/

Let me know if you have any further questions!
Best regards!

[dking]

Thank you very much! That works.

I'll have to put that one in my notes.

[mateusz.b]

You're welcome! I'll suggest including that information in our API docs. In case of any further questions, feel free to contact us again.

Best regards!