Highcharts - HTML tooltip & datalabels render issue

Question

here is my problem, when you set useHTML: true for datalabels, it seems that the label text will override the tooltip background.

You can see the behaviour in this simple fiddle: bar chart

Try to display a tooltip on mouse over a bar, and you will see the text of the datalabel in the tooltip background.

Is it possible to set a z-index on the data labels?

I've tried to add this in the tooltip definition but without success:

style : {
    color: 'black',
    'z-index': 0
    },

I've also tried to set up span classes for data labels and tooltips, then add a z-index into css properties for these classes, but it's still not working.

Edit: As I'm still searching for a solution to my problem, can someone could point me the way to add a class to the bars (or the datalabels) of the charts? My aim is to call a specific onclick event on this class.

Answer 1

Ok, so here is a workaround for my problem... The idea is to create your own custom tooltip.

The solution was given on the Highcharts forum: Highcharts forum post

To do so, set the 'useHTML' property on both datalabels and tooltips, remove some defaults properties of the tooltips and setup the CSS classes in the formatters functions:

//JS
datalabels: {
    ...
    useHTML: true,
    formatter: function() {
        return ("<span class='datalabel'>" + this.y + "</span>");
    }
}

tooltip: {
    ...
    borderWidth:0,
    borderRadius:0,
    shadow:false,
    useHTML: true,
    formatter: function() {
        return ("<div class='tooltip'>" + this.y + "</div>");
    }
}

The final step (the most important) is to set up the CSS rules for the highcharts-tooltip span class (which is used by Highcharts to render HTML tooltips).

//CSS
.highcharts-tooltip span {
    background-color:white;
    z-index:9999!important;  
}

Notice the z-index property, which is the property that will allow the tooltip to render over the datalabel.

Now you can just custom your tooltip by setting CSS rules for the 'tooltip' class.

For a full live example, see the jsfiddle here: Custom tooltip

Note: It is not mandatory to specificy the datalabel class in the formatter for this solution to works, I just need so I can register a specific mouse event on it.

Answer 2

6 years later, along with HC v6.1.1, a new tooltip option has been added, which solves this problem. See tooltip.outside

datalabels: {
    useHTML: true,
    formatter: function() {
        return ("<span class='datalabel'>" + this.y + "</span>");
    }
},

tooltip: {
    outside: true
}