javascript - Highcharts tooltip background according to line (without setting backgroundColor = null)

Question

I have this exact same issue: Highcharts tooltip background according to line

but the solutions provided here do not work for me because setting backgroundColor to null makes the pointer arrow disappear:

Hence why I have been working with trying to update the tooltip background color from the formatter itself where I have access to the series color:

      args.options = Object.assign(args.options, {backgroundColor : this.series.color});
      this.color = this.series.color;

But for some reason only the initial color replacement works for me. Then subsequent tooltips show the color that I updated the first time.

First hover: Second hover:

AND

First hover: Second hover:

Demo of issue: http://jsfiddle.net/GGQ2a/23/

Refresh the page a couple times and hover on different series to see the issue.

I need to change the color on every hover and for some reason the replacement only gets picked up the first time arround

Answer 1

You can wrap Tooltip.refresh() method and change the tooltip's background according to the point's series color.

const H = Highcharts;

H.wrap(H.Tooltip.prototype, 'refresh', function (p, point, mouseEvents) {
  p.call(this, point, mouseEvents);

  const label = this.label;

  if (point && label) {
    label.attr({
      fill: point.series.color
    });
  }
});

example: http://jsfiddle.net/t38x6kug/