Highcharts仅在链接的系列之间共享工具提示

Question

I'm making a chart with an confidence interval bound like this: https://www.highcharts.com/demo/arearange-line

It works great, but when there is more than one dataset (so, more than two series), the shared tooltips affect every series, when I only want it to mention the series (not the min and max values, and not the other line) the mouse is hovered over, as if shared were false.

Here's my relevant configuration:

tooltip: {
    shared: true,
},

series: [{
    data: averages,
    zIndex: 1,
}, {
    data: ranges,
    type: 'arearange',
    linkedTo: ':previous',
    zIndex: 0,
}, {
    data: averages2,
    zIndex: 1,
}, {
    data: ranges2,
    type: 'arearange',
    linkedTo: ':previous',
    zIndex: 0,
}]

And here it is demonstrated in a jsfiddle: https://jsfiddle.net/ktd39x97/

Does anyone have any ideas how I can get around this?

Answer 1

Highcharts doesn't support that kind of behavior of shared tooltip - there can be only one for all series.

Workaround:

This custom code can mimic the desired behavior using the standard no-shared tooltip:

  tooltip: {
    formatter: function(e) {
      var point = this.point,
        series = point.series,
        chart = series.chart,
        correspondingSeries = series.linkedSeries[0] || series.linkedParent,
        linePoint,
        arearangePoint;

      // unselect previously selected point
      if (chart.extraHoveredPoint) {
        chart.extraHoveredPoint.setState('');
      }

      // find corresponding point
      if (correspondingSeries) {
        correspondingPoint = correspondingSeries.points[point.index];
        correspondingPoint.setState('hover');
        chart.extraHoveredPoint = correspondingPoint;
      }

      // identify type of points for formatting purposes
      if (point.low !== undefined) {
        arearangePoint = point;
        linePoint = correspondingPoint;
      } else {
        arearangePoint = correspondingPoint;
        linePoint = point;
      }

      return "Line: " + linePoint.y + "<br>" + "Arearange: " + arearangePoint.low + " - " + arearangePoint.high;

    }
  },

API refences:

• https://api.highcharts.com/class-reference/Highcharts.Point#setState
• https://api.highcharts.com/highcharts/tooltip.formatter

Live demo: https://jsfiddle.net/BlackLabel/gq1d1aba/