regroup 2 lines in tooltip (among many other lines) highcharts

Question

So I'm using highcharts to make some graphs but I'm facing something new :

I have n lines in my graph, I wanna pair them using tooltip (and display some info). Here's some examples :

example 1

that was with only 2 lines, here's with 6 lines :

example 2

Of course, I wanna regroup the lines with the same colors. Any ideas?

EDIT

This is how I build the chart (data contains all the data : numbers, dates & some text) :

function chartOffer(data)
{
    var days = [];
    var list = [];
    var colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];

    for (var i = data['dates'].length - 1; i >= 0; i--) 
    {
        days.push(data['dates'][i].days);
    }

    for (var i = data['list'].length - 1; i >= 0; i--) 
    {
        if (data['list'][i].length != 0) 
        {
            var tooltip_obj = new Object();
            tooltip_obj.pointFormat = "{series.name}<br/>Match offres: <b>{point.y:.2f}</b><br/>"
            var temp_list   = [];
            var temp_liste  = [];

            /* --- start definit l'index corresponant à la date de départ --- */
            var temp_1 = data['dates'].length;
            var temp_2 = data['list'][i].length;
            var start = temp_1 - temp_2;

            var temp_object  = new Object();
            var temp_objecte = new Object();

            temp_object.name = data['list'][i][0].enseigne;
            temp_object.lineWidth = 1;
            temp_object.color = colors[i % 9];
            temp_object.pointStart = start;

            temp_objecte.name = data['list'][i][0].enseigne+' Macth';
            temp_objecte.lineWidth = 1;
            temp_objecte.color = colors[i % 9];
            temp_objecte.pointStart = start;
            temp_objecte.yAxis = 1;
            temp_objecte.tooltip = tooltip_obj;
            temp_objecte.dashStyle = 'Dash';

            for (var j = data['list'][i].length - 1; j >= 0; j--) 
            {
                var temp_object_two     = new Object();
                var temp_object_three   = new Object();

                temp_object_two.shops   = (+data['list'][i][j].nb_shop);
                temp_object_two.y       = (+data['list'][i][j].nb_offers);
                temp_object_two.match   = (+data['list'][i][j].nb_product);

                temp_object_three.y     = (+((data['list'][i][j].nb_offers_ean / data['list'][i][j].nb_offers)*100));

                temp_list.push(temp_object_two);
                temp_liste.push(temp_object_three);
            }

            temp_object.data  = temp_list;
            temp_objecte.data = temp_liste;
            list.push(temp_object);
            list.push(temp_objecte);
        }
    }
    var tip = "{series.name}<br/>Nombre de pdv: <b>{point.shops:,.0f}</b><br/><span style='color: {series.color}'>Nombre d'offres: </span><b>{point.y:,.0f}</b><br/>Nombre de produits: <b>{point.match:,.0f}</b>";

    var myChart = Highcharts.chart('container', 
    {
        title: {
            text: 'Nombre d\'offres'
        },
        yAxis: [{
            title: {
                text: 'Nb offres'
            }
        }, { // Secondary yAxis
            title: {
                text: 'Match offres'
            },
            lineColor : '#3498db',
            labels: {
                format: '{value} %',
                style :{
                    color : '#3498db'
                }
            },
            opposite: true
        }],
        xAxis: {
            categories: days
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        tooltip: {
            useHTML: true,
            pointFormat: tip,
            shared: false
        },
        plotOptions: {
            series: {
                marker: {
                    radius: 3
                }
            }
        },
        series: list
    });
}

as said in comments bellow, I don't know what part is realy usefull :/

Answer 1

You need to extend Highcharts to have such behaviour.

Wrap method which grabs data for the tooltip - it filters points which does not belong to the group of the hovered point.

Highcharts.wrap(Highcharts.Pointer.prototype, 'getHoverData', function(p, hoverPoint) {
  const hoverData = p.apply(this, Array.prototype.slice.call(arguments, 1))

  if (this.chart.tooltip.options.grouped) {
    hoverData.hoverPoints = hoverData.hoverPoints.filter(point => point.series.options.group === hoverData.hoverPoint.series.options.group)
  }

  return hoverData
})

Set tooltip's group and shared options to true:

tooltip: {
  grouped: true,
  shared: true,
},

Group the series with the group option:

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    colorIndex: 0,
    group: 's1'
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
    colorIndex: 1,
    group: 's2'
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
    colorIndex: 0,
    dashStyle: 'dash',
    group: 's1'
  }, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5].reverse(),
    colorIndex: 1,
    dashStyle: 'dash',
    group: 's2'
  }]

example: http://jsfiddle.net/o2ac1r3f/