Highcharts tooltip background according to line

Question

I'm trying to make the tooltip's background color match the line's color using Highcharts.

I'm trying to find the most reasonable native way to handle this -- if it's possible to avoid adding a <div /> with a background color to the formatter, that would be great - but if not I guess that works too.

The lines colors & amount will change a lot so I don't wanna hard-code the background colors the same way I put the line colors - if they could draw the background the same as the line color, that would be great.

My only idea didn't work, I'm not sure what the scope for these functions is in this case:

tooltip : {
    backgroundColor: function() {
        return this.line.color;
        //return this.point.color;
    }
}

My line colors are set normally:

series : [
    {
        color : '#fa0'
    }
]

Any ideas?

Thanks in advance.

Answer 1

It's not possible to set this in other way than using formatter. Only something like this: http://jsfiddle.net/GGQ2a/2/

JS:

tooltip: {
        useHTML: true,
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function(){
            return '<div style="background-color:' + this.series.color + '" class="tooltip"> ' +
                    this.series.name + '<br>' + this.key + '<br>' + this.y +
                '</div>';
        }
    },

And CSS:

.tooltip {
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px; 
} 

Answer 2

You can also try too hook up to mouseOver event.

Advantage of this solution over the one of Paweł Fus is that you can keep the width of tooltip which is necessary for nice anchor thing.

Reference: https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver

 plotOptions: {
        series: {
            stickyTracking: false,
            events: {
                mouseOver() {
                    const color = arguments[0].target.color;

                    this.chart.tooltip.options.backgroundColor = color; //first time overwrite
                    const tooltipMainBox = document.querySelector(`g.highcharts-tooltip path:last-of-type`);
                    if (tooltipMainBox) {
                      tooltipMainBox.setAttribute('fill', color);
                    }
                }
            }
        }
    }

jsFiddle: http://jsfiddle.net/ymdLzzkb/1/