title: Highcharts Tooltip: Introducting a line break into a comma delimited string
body: <p>I have a working instance of a chart and the tooltip is displayed fine as well. This is how I set up the series and the tooltip for the series: </p>
  
  <pre><code>data.aggCounts.forEach(function(point, i) {
    series[0].data.push({
      name: data.allDates[i],
      tooltipText: data.agSums[i][1],
      y: data.aggCounts[i]
    });
  });
  </code></pre>
  
  <p><code>data.agSums</code> string being fed to <code>tooltipText</code> looks like this:</p>
  
  <pre><code>"item 1: 0, item 2: 3, item 4: 2, ...."
  </code></pre>
  
  <p>I want the items to display in new lines I tried replacing the with /n but that doesn't work. So I introduced a formatter which doesn't seem to do anything either: </p>
  
  <pre><code>tooltip: {
    pointFormat: '{point.tooltipText}',
      useHTML: true,
      formatter: function() {
      let text = this.point.tooltipText
      return text.replace(/,/g, "&lt;br&gt;")
    }
  }
  </code></pre>
  
  <p>There is another option to use the original array where the data is taken from and put into a string. This array is part of the data object <code>@Input data</code> that is given to my <strong>highcharts</strong> component however when I try to access the data inside options it throws this error: </p>
  
  <pre><code>@Input data;
  
  const options: Highcharts.Options = {
    tooltip: {
      useHTML: true,
      formatter: function() {
        let data = this.data
        //the above line throws: "Potentially invalid reference access to a class field via 'this.' of a nested function", so I don't have access to the original array
      }
    }
  }
  </code></pre>
  
  <p>Any Idea how I can either access the data structure inside the formatter function of how I can replace all commas in the string with a <code>&lt;br&gt;</code>?</p>
  
  <p>Edit: Even if I access the data inside the formatter I can't use it for a specific point as I can either access the component level variables or the chart instance var. like the <strong>x</strong> and <strong>y</strong> point. Is there a way to access them both if no the only other option is to replace the commas with a newline...</p>