Showing arrays in an array in tooltip in Highcharts

Question

I have a data set which looks something like this.

var toolTip = [ ["IN001", "IN002"], "IN003", "IN004", ["IN005", "IN006", "IN007"] ];

I have a scatter plot which uses these tooltips to show data in it.

{
      type: 'scatter',
      name: 'incidents',
      yAxis: 1,
      data: [ [0,100],[1,100],[2,100],[3,100] ],
      tooltip: {
      pointFormatter: function(){
          return "Incident " + toolTip[this.series.data.indexOf( this )] ;
        }
      }
    },

Now this shows the data in a line in tooltip. I want a next line in case there is more than one data in a tooltip. For example

IN0001
IN0002

instead of IN0001, IN0002.

How do i get the next line. I don't know how to parse this data in this case.

One more doubt i have is, Each name should be a hyperlink. How do i make every word in the toolTip array to appear as a link in the tooltip?

Any help is appreciated.

Here is a working model of the following. jsFiddle

Answer 1

You can change your pointFormatter function so you will meet your requirements. You can add breaking lines using 'br' and you can add links using 'a' like in normal HTML. You can use Highcharts.each() for iterating over your array and adding next elements to your string.

pointFormatter: function() {
    var string = '';
    Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
      string += '<a href = "">' + p + '</a><br>'
    })
    return "Incident<br>" + string + "<br />";
}

Here you can see an example how it can work: http://jsfiddle.net/o2zmLngr/5/