How to get multiple series data in tooltip highcharts (Without loosing tooltip pointer arrow)

Question

My code looks like this right now (demo below)

Demo: http://jsfiddle.net/pintu31/AcNUM/2/

tooltip: {
        formatter: function() {
            var s = [];

            $.each(this.points, function(i, point) {
                s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
                    point.y +'<span>');
            });

            return s.join(' and ');
        },
        shared: true
    },

When shared is false,I still have the pointer arrow! Like in the below: http://jsfiddle.net/AcNUM/259/

But when I use the shared version in the first demo, I lose the pointer arrow on the tooltip:

Answer 1

Use a formatter and define what should be displayed in the tooltip. In the formatter you can find the point which has the same category as the hover point.

tooltip: {
  formatter: function (tooltip) {
    const series = this.series.chart.series.find(series => series !== this.series);
    const point = series.points.find(point => point.category === this.x);

    if (point !== undefined) {
      return tooltip.defaultFormatter.call([point.getLabelConfig(), this], tooltip);
    }
  }
},

example: http://jsfiddle.net/AcNUM/260/