Remove Highcharts dataLabel border-CodePudding

I have some problems with Highcharts Maps library. How can I remove the black dataLabels border?

Here are my settings:

var Map = $('#container').highcharts('Map', {
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series : [{

        mapData: Highcharts.maps['gbpostcodes'],

            dataLabels: {
                enabled: true,
                fontSize:'20px',
                color:'yellow',
                borderWidth: 0,
                format: '{point.properties.Name}'
            }

    }]
});

(see attached screenshot)

CodePudding user response：

Highcharts V5 code for fixing this is

dataLabels: {
  style: {
    textOutline: 0
  },
}

CodePudding user response：

This did the job for me:

plotOptions: {
        series: {
          dataLabels: {
            style: {
              textOutline: 0,
            }
        }
    }
}

CodePudding user response：

You sure can. See the API docs here regarding dataLabels. To remove the border set:

    dataLabels: {
    ...
    borderWidth: 0,
    ...
    },

If you are talking about the text shadows you can do this in your dataLabel as well:

            dataLabels: {
                enabled: true,
                fontSize: '20px',
                color: 'yellow',
                borderWidth: 0,
                format: '{point.properties.Name}',
                style: {
                    textShadow: false
                }
            },

CodePudding user response：

I had the same problem with a column chart. I've solved the issue by using this in my plotOptions.column:

dataLabels: {
    /* ... */,
    style: {
        textShadow: null
    }
}

Does it work for you ?