HighCharts: Labels visible over tooltip

Solution 1:

You can set useHTML and define your own tooltip via css:

http://jsfiddle.net/4scfH/4/

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

CSS

.label {
    z-index: 1 !important;
}

.highcharts-tooltip span {
    background-color: white;
    border:1 px solid green;
    opacity: 1;
    z-index: 9999 !important;
}

.tooltip {
    padding: 5px;
}

Explanation: when you set useHTML to true, it displays the tooltip text as HTML on the HTML layer, but still draws an SVG shape in the highcharts display SVG for the box and arrow. You would end up with data labels looking like they were drawn on top of the tooltip, but the tooltip text itself on top of the data labels. The config options above effectively hide the SVG tooltip shape and build and style the tooltip purely with HTML/CSS. The only down-side is that you lose the little "arrow" pointer.

Solution 2:

If you set tooltip.backgroundColor to "rgba(255,255,255,1)" you'll get tooltip with "no transparency"

You will have to remove useHTML: true in the pie settings.

Fork of your jsfiddle: http://jsfiddle.net/kairs/Z3UZ8/1/

tooltip: {
  backgroundColor: "rgba(255,255,255,1)"
}

Documentation on highchart

Solution 3:

I had the same problem. The Labels were visible over the tooltip. Removing useHTML=true for the labels worked for me.