CODEWITHSUNDEEP
javascripthighcharts
Hiero
Hiero

Reputation: 2205

Highcharts tooltip backgroundColor inherit from the hovered element

Its possible to add backgroundColor to the tooltip as the hovered line?

For example when hover on blue the tooltip backgroundColor to be blue

    tooltip: {
            borderWidth: 0,
            backgroundColor: "rgba(255,255,255,0)",
            borderRadius: 0,
            shadow: false,
            useHTML: true,
            percentageDecimals: 2,
            backgroundColor: "rgba(255,255,255,1)",
            formatter: function () {
                return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
            }
        }

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/style/

Upvotes: 1

Views: 471

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can set useHTML as true, disable paddings and add style param in your div. Example: http://jsfiddle.net/50pvg4b3/

tooltip: {
            useHTML:true,
            style:{
                padding:0
            },
            formatter: function () {
                return '<div class="tooltip" style="background-color:'+this.series.color+';">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
            }
        },

Upvotes: 1

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You could use the mouseOver event of a series to change the fill color of the tooltip.

See this code demonstration:

plotOptions: {
    series: {
        events: {
            mouseOver: function(event) {
                $(".highcharts-tooltip > path:last").attr("fill", this.color);
            }
        }
    }
}

And this JSFiddle example of it in action.

Upvotes: 1

Related Questions