Shared tooltip on multiple charts not formatting correctly

Question

I have multiple highcharts in one container and wanted to use a shared tooltip for it.

I am able to generate a shared tooltip for am not able to format it to how I want.

This is my code:

Highcharts.chart('container', {
      yAxis: [{
        title: {
          text: 'Pressure'
      },
      height: '50%',
      lineWidth: 2
  }, {
    title: {
      text: 'Temperature'
  },
  top: '50%',
  height: '50%',
  offset: 0,
  lineWidth: 2
}],
series: [{
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureIn',
    chart_pl: 'bottom',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
    yAxis: 1,
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureOut',
    chart_pl: 'bottom',
    data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
    yAxis: 1,
}],
tooltip:  {
    formatter: function () {
        return this.points.reduce(function (s, point) {
            // console.log(point.series.userOptions.val);
            return `${s}<br/>${point.series.userOptions.val}<br/>${point.series.name}: ${point.y}m`;
        }, `<b>${this.x}</b><br><br>`);
    },
    shared: true
},
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Now my tooltip looks like this:

x axis value

temp-one
TemperatureIn: y axis value
temp-one
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
temp-two
TemperatureOut: y axis value

How do I format my tooltip to look like:

x axis value

temp-one
TemperatureIn: y axis value
TemperatureOut: y axis value

temp-two
TemperatureIn: y axis value
TemperatureOut: y axis value

temp-one and temp-two are values stored in point.series.userOptions.val. I am just not sure how to format my tooltip to look like that.

Answer 1

In the tooltip formatter function, try comparing the series name to that of the previous point and only include it if different, e.g.:

Highcharts.chart('container', {
      yAxis: [{
        title: {
          text: 'Pressure'
      },
      height: '50%',
      lineWidth: 2
  }, {
    title: {
      text: 'Temperature'
  },
  top: '50%',
  height: '50%',
  offset: 0,
  lineWidth: 2
}],
series: [{
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureIn',
    chart_pl: 'bottom',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
    yAxis: 1,
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureOut',
    chart_pl: 'bottom',
    data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
    yAxis: 1,
}],
tooltip:  {
    formatter: function () {
        return this.points.reduce(function (s, point, i, points) {
            // console.log(point.series.userOptions.val);
            var series = (i == 0 || point.series.userOptions.val != points[i - 1].series.userOptions.val) ?  `${point.series.userOptions.val}<br/>` : '';
            return `${s}<br/>${series}${point.series.name}: ${point.y}m`;
        }, `<b>${this.x}</b><br><br>`);
    },
    shared: true
},
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>