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

So you want to achieve something similar to this chart? jsfiddle.net/o2zmLngr/5 If my example will meet your requirements I will post it as ananswer — Grzegorz Blachliński
– Grzegorz Blachliński, Commented Oct 6, 2016 at 17:30
That's exactly what i wanted. Thanks a ton for the awesome answer. This definitely is the solution i was looking for. :) — Nikhil Tikoo
– Nikhil Tikoo, Commented Oct 6, 2016 at 17:46

Grzegorz Blachliński · Accepted Answer · 2016-10-06 17:49:50Z

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/

answered Oct 6, 2016 at 17:49

Grzegorz Blachliński

5,24213 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikhil Tikoo Over a year ago

The links don't seem to be active. I tried giving a href and clicking, but it doesn't take to the mentioned URL.

Grzegorz Blachliński Over a year ago

You should set pointer-events to auto in your css: jsfiddle.net/o2zmLngr/9

Collectives™ on Stack Overflow

Showing arrays in an array in tooltip in Highcharts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related