[Fixed] Categories and tooltip in Highcharts

Issue

I have a complex Category like "Sprint 123<br>April 01", of which I need to display only Sprint number on X axis, but tooltip should include both.
So I created a function which strips only sprint numbers:

this.chartOptions.xAxis.categories=this.getSprintNums(this.response.categories);

It does show them appropriately.

Trying to build tooltip:

const cats = this.response.categories;
this.chartOptions.tooltip = {
   formatter: function(...cats) { // it does pass array of length 1, why?
      const cat = cats.find(c => c.indexOf(this.x) > -1);  // get "indexOf is not a function"
      const date = cat.split('<br>'[1]);
      return this.x.split('<br>[0] + date);
}
}

How can I fix that error or
is there a better solution to this problem?
Maybe a way to pass Categories array to formatter function or
a way to hide part of it (after <br>) from display on X axis?

I am fairly new to this.
Please help!

Using Angular 6 and Highcharts 6.

TIA,
Oleg

Solution

// it does pass array of length 1, why?

Because tooltip formatter function accepts only one parameter. Use labels formatter instead and the tooltip formatter in a different way. Example:

xAxis: {
    categories: ["Sprint 123<br>April 01"],
        labels: {
            formatter: function() {
                return this.value.toString().split('<br>')[0];
            }
        }
},
tooltip: {
    formatter: function(){
        const {x, y} = this;
        const splitted = x.toString().split('<br>');
        const sprintNum = splitted[0];
        const date = splitted[1];

        return `Name: ${sprintNum}<br>Date: ${date}<br>Y: ${y}`
    }
}

---

Live demo: http://jsfiddle.net/BlackLabel/Ly7jue5h/

API Reference:

https://api.highcharts.com/highcharts/xAxis.labels.formatter

https://api.highcharts.com/highcharts/tooltip.formatter