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>',
},