Highcharts Tooltip Background According To Line

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 a

Solution 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; 
} 

Solution 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/

Solution 3:

Old question, but an alternate way to do this is to hook the tooltipRefresh event and swap in with some jquery. Working code:

$(function () {
    $('#container').highcharts({
        chart: {
            type:'column',
            events: {
            tooltipRefresh: function(e) {
              if (!e.target.hoverSeries) return;
              $('.highcharts-tooltip>path:last-of-type')
                .css('fill', e.target.hoverSeries.color);
            }
          }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        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]
        },{
            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]
        },{
            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]
        }]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>