How to get rid of white background/shadow appearing in the series text?

Question

I am using highcharts. Everything seems fine but I am not sure why the series text (LLLL!, XYZM) is adding a white background or a shadow in the text. I tried to remove this white background with textShadow: 'none'. Also tried backgroundColor: 'rgba(0, 0, 0, 0)', but it doesn't seem to work. Any other suggestions?

// container7
var chartOptions = {
    chart: {
        type: 'column',
        inverted: true,
        height:200
       
        
    },
    title: {
        text: ''
    },
    xAxis: {
        lineColor: 'white',
        categories: ['ABCD'],
        labels: {
        padding: 40, // Add padding of 40 to the x-axis labels
        style: {
            fontSize: '12px' // Adjust the font size as needed
        }
    }
},
    yAxis: {
        allowDecimals: false,
        max: 100,
        title: {
            text: ''
        },
        labels: {
            enabled: false // Hide y-axis labels
        },
        gridLineWidth: 0 // Remove grid lines
    },
   plotOptions: {
    column: {
        stacking: 'normal', // this will be our default
        dataLabels: {
            enabled: true,
            style: {
                color: 'black', // Set font color to black
                fontSize: '13px', // Set font size to 12px
                textShadow: 'none' // Remove text shadow
            },
            backgroundColor: 'rgba(0, 0, 0, 0)', // Set background color to transparent
            formatter: function() {
                return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
            }
        }
    }
},


   colors: ['#d37295', '#fabfd2'],
    series: [{
        name: 'LLLL!',
        data: [57] 
    }, {
        name: 'XYZM',
        data: [43] 
    }],
    legend: {
        enabled: false // Hide the legend
    },
    credits: {
        enabled: false // Hide the credits
    }
};

// Render the chart using Highcharts
Highcharts.chart('container7', chartOptions);

<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>... look like this:</h2>
<div id="container7" style=" border: 1px solid lightgray;"></div>

Answer 1

What you are looking for is dataLabels.style.textOutline. Just set this property to none and it will solve your problem.

API: https://api.highcharts.com/highcharts/plotOptions.timeline.dataLabels.style.textOutline

const chartOptions = {
  chart: {
    type: 'column',
    inverted: true,
    height:200
  },
  title: {
    text: ''
  },
  xAxis: {
    lineColor: 'white',
      categories: ['ABCD'],
      labels: {
      padding: 40,
      style: {
        fontSize: '12px'
      }
    }
  },
  yAxis: {
    allowDecimals: false,
    gridLineWidth: 0,
    max: 100,
    title: {
      text: ''
    },
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        backgroundColor: 'rgba(0, 0, 0, 0)',
        style: {
          color: 'black', 
          fontSize: '13px',
          textOutline: 'none' // remove white outline
        },
        formatter: function() {
          return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
        }
      }
    }
  },
  colors: ['#d37295', '#fabfd2'],
  series: [{
    name: 'LLLL!',
    data: [57] 
  }, {
    name: 'XYZM',
    data: [43] 
  }],
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  }
};


Highcharts.chart('container', chartOptions);

<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>textOutline: 'none':</h2>
<div id="container" style=" border: 1px solid lightgray;"></div>