overlord overlord - 7 months ago 125
Javascript Question

Remove the second tooltip in Tree map using Highcharts

I am drawing a treemap using Highcharts in my web app. I am using the latest highcharts CDN.
I have written a custom tooltip which is working just fine. But I am able to see a second small tooltip. I want to remove the second one. I have not written any code for the second tooltip and that tooltip is visible only for the smaller (shape) data-points.

In the following image you can see the custom tooltip and the other one (small) which I want to remove.

Screenshot of treemap

Here is my code

$.getJSON("URL_TO_GET_DATA_FROM_SERVER", function(json) {

$('#container').highcharts({
colorAxis: {
minColor: '#FF0000',
maxColor: '#00FF00',
stops: [
[0, '#FF0000'],
[0.50, '#736F6E'],
[1, '#00FF00']
]
},
title: {
text: ''
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
borderColor: '#AAA',
borderRadius: 2,
formatter: function() {
return 'Ticker: <b>' + this.point.name + '</b><br></br>Market Cap (JPY M): <b>' + this.point.value.toFixed(2) + '</b><br></br>Percent Change (%): <b>' + this.point.colorValue.toFixed(2) + '</b>';
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: json,
}]
});
});


Also, if this is browser functionality then please let me know. I am using Google Chrome.

Answer

A way of just removing the elements that are causing this (<title> elements) is adding this to your chart options:

chart: {
    events: {
        load: function(e) {
            $(".highcharts-data-labels text > title").remove();
        },
        redraw: function(e) {
            $(".highcharts-data-labels text > title").remove();
        }
    }
}

Check this JSFiddle where the last point would've had a title if it was not removed.