Highstock tooltip formatter if using split : true

Question

How can i edit tooltip value when i use split:true for my tooltip I made an example of what I will have if I use default tooltip.formatter

split: true,
formatter: function () {
    return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>';
}

http://jsfiddle.net/5ervo9ab/1/

I just get a first letter of series name, but i wanna see points data

Answer 1

You need to iterate over the points array that the formatter function returns.

I forked your fiddle to make it work : http://jsfiddle.net/maximelafarie/5ervo9ab/3/

You can now access the column name and each series x and y values.

EDIT:

Here's a version without jQuery : http://jsfiddle.net/maximelafarie/5ervo9ab/4/

EDIT 2:

Here is the final working version of your initial fiddle without jQuery : http://jsfiddle.net/maximelafarie/5ervo9ab/5/

How it works:

When split is enabled in tooltip, you can format it but it takes an array like ['Column name / label', 'Point 1', 'Point 2', 'Point n+1', ...].

You can set some HTML inside the array to format your different tooltips content (as I done with <b>...</b>).

Then the formatter has to return the final array that contains the formatted content to each tooltip.

formatter: function() {
  var s = [];
  s.push(this.x);
  this.points.forEach(function(point) {
    s.push('<b>' + point.series.name + '</b>: ' + point.y);
  });

  return s;
},
split: true