Adding a colored border (not shadow) to the label text on a Highcharts treemap

Question

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!

Answer 1

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',
....

Answer 2

I think this is not possible with the textShadow attribute wich is not well interpreted with IE. However you can add a background on your labels to be more visible :

$(function() {
  $('#container').highcharts({
    title: "",
    series: [{
      type: "treemap",
      data: [{
        name: 'Name One',
        value: 1,
        color: "#FFFF00"
      }, {
        name: 'Name Two',
        value: 1,
        color: '#000099',
      }],
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true,
          align: 'center',
          borderRadius: 5,
          backgroundColor: 'rgba(255, 255, 255, 1)',
          style: {
            fontSize: '20px',
            color: '#000',
          }
        },
      }],
    }],
  });
})

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

<div id="container"></div>

You can inspire yourself from the documentation:

http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.backgroundColor