CODEWITHSUNDEEP
javascriptjqueryhighchartstooltiplabel
Michal S
Michal S

Reputation: 1113

HighCharts: Labels visible over tooltip

Labels on my chart are showing over tooltip, which doesn't look very nice. I tried to play with zIndex, but to no result. How can I make tooltips not transparent? Here's my jsFiddle: http://www.jsfiddle.net/4scfH/3/

$(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graf1',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },

      title: {
        margin: 40,
        text: 'Podíl všech potřeb'
      },
      tooltip: {
        //pointFormat: '<b>{point.y} Kč [{point.percentage}%]</b>',
        percentageDecimals: 2,
        backgroundColor: "rgba(255,255,255,1)",
        formatter: function() {
          return this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b>';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: '#000000',
            connectorWidth: 2,
            useHTML: true,
            formatter: function() {
              return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: 'Potřeba',
        data: [
          ['Firefox', 45.0],
          ['IE', 26.8], {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['Others', 0.7]
        ]
      }]
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>

Upvotes: 18

Views: 38176

Answers (8)

user1583465
user1583465

Reputation: 197

set tooltip outside property to true. outside : true

Upvotes: 2

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

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.

Upvotes: 31

Sandeep Thar
Sandeep Thar

Reputation: 1177

For Highchart tooltips with html format

Highchart config

tooltip: {
    borderWidth: 0,
    backgroundColor: "rgba(255,255,255,0)",
    shadow: false,
    useHTML: true
    ........
},

CSS:

.highcharts-tooltip>span {
    background-color: #fff;
    border: 1px solid #172F8F;
    border-radius: 5px;
    opacity: 1;
    z-index: 9999!important;
    padding: .8em;
    left: 0!important;
    top: 0!important;
}

Screenshot

Upvotes: 2

Sushil Mahajan
Sushil Mahajan

Reputation: 147

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

Upvotes: 5

mr_than
mr_than

Reputation: 410

I still had issues with some of the solutions around, setting z-index: 999 on .tooltip wasn't having any effect because of the various container divs. But, I've found setting this works nicely (when legend and tooltip are HTML). No need for setting other z-indexes either:

.highcharts-legend { z-index: -1; }

Upvotes: 0

JPM
JPM

Reputation: 31

I had same issue. My solution. Tooltip - useHTML = true. Tooltip - Formatter = HTML code there with one div container. here margin in negative value is important in css.

tooltip: {
    backgroundColor: "rgba(255,255,255,1)",
    useHTML: true,
    formatter: function() {
        var html = [];
        html.push('<b>Correlation to ' + this.point.p + '</b><br>');
        if (null != this.point.associatedPoints 
                && typeof this.point.associatedPoints != 'undefined' 
                && this.point.associatedPoints.length > 0) {
            $.each(this.point.associatedPoints, function(i, associatedPoint) {
                html.push('Responses: ' + associatedPoint.nFormatted);
            });
        }
        return '<div class="tooltip-body">' + html.join('') + '</div>';
    }

CSS:

.highcharts-tooltip span {
    z-index: 9999 !important;
    top:2px !important;
    left:2px !important;
}
.highcharts-tooltip span .tooltip-body{
    background-color:white;
    padding:6px; 
    z-index:9999 !important;
    margin-bottom:-14px;
    margin-right:-14px;
}

Upvotes: 2

Kai-Rune
Kai-Rune

Reputation: 462

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

Upvotes: 6

Cine
Cine

Reputation: 4392

and if you dont want to daddle in the problems there are in useHTML, here is the way to do it in the svg:

 Highcharts.wrap(Highcharts.Chart.prototype, 'redraw', function(proceed, animation) {
  proceed.call(this, animation);
  try {
   if (this.legend.options.floating) {
    var z = this.legend.group.element, zzz = z.parentNode;
    zzz.removeChild(z);
    zzz.appendChild(z); //zindex in svg is determined by element order
   }
  } catch(e) {

  } 
 });

Upvotes: 1

Related Questions