I would like the label text on my Highcharts treemap to be white with a black border, so that it is consistent and clearly visible on all colors. Is this possible? I have played with the textShadow options, and it looks okay (although not great) in Chrome, but it looks very unprofessional in Internet Explorer. See the fiddle here:
https://jsfiddle.net/k1hohozg/4/
$(function () {
$('#container').highcharts({
title: "",
series: [{
type: "treemap",
data: [
{
name: 'Name One',
value: 20,
color: "#FFFF00"
}, {
name: 'Name Two',
value: 20,
color: '#000099',
}, {
name: 'Name Three',
value: 1,
color: '#007799',
}, {
name: 'Name Four',
value: 1,
color: '#FFCC00',
}
],
levels: [{
level: 1,
dataLabels: {
enabled: true,
align: 'center',
style: {
fontSize: '20px',
color: '#FFFFFF',
textShadow: "0 0 3px #000, 0 0 3px #000",
}
},
}],
}],
});
})
I do not want to use the "contrast" option because I need all the text to look the same, hence white with a black border. What is the best way to make this look better in all standard browsers?
Thanks!
There is no default Highcharts way to deal with IE rendering poorly text-shadow. It is possible to set useHTML to true and add multiple labels that will be imitating shadow. (Looks fine in Chrome, Firefox and IE11).
Example: http://jsfiddle.net/yzLavxc9/2/
....
dataLabels: {
useHTML: true,
formatter: function () {
return '<div class=dataLabelContainer><div style="position: absolute; top: -1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: -1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; color: #fff;">'+this.key+'</div></div><div style="color: #fff;">'+this.key+'</div></div>';
},
enabled: true,
align: 'center',
style: {
fontSize: '20px',
....