如何去除Highcharts系列文本中的白色背景/阴影？

针对你遇到的堆叠柱状图数据标签（LLLL!、XYZM）出现白色背景或阴影，且常规样式设置无效的问题，提供以下几种可行方案：

方案1：强制覆盖样式并开启HTML渲染 #

Highcharts的SVG数据标签有时会受内部默认样式影响，开启useHTML: true后改用HTML渲染标签，能更精准控制样式：

plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            useHTML: true, // 启用HTML渲染模式
            style: {
                color: 'black',
                fontSize: '13px',
                textShadow: 'none !important', // 强制去除文本阴影
                backgroundColor: 'transparent !important', // 强制设置透明背景
                padding: 0,
                margin: 0
            },
            formatter: function() {
                // 用HTML标签包裹内容，进一步确保样式生效
                return `<span style="text-shadow: none; background: transparent;">${this.series.name}: ${Highcharts.numberFormat(this.y, 0)}%</span>`;
            }
        }
    }
},

方案2：全局CSS强制覆盖 #

如果局部设置仍被默认样式覆盖，可直接针对Highcharts的数据标签类写全局样式：

.highcharts-data-label span {
    text-shadow: none !important;
    background-color: transparent !important;
}

方案3：检查版本兼容性 #

部分旧版Highcharts在数据标签样式处理上存在bug，尝试升级到最新稳定版（如v10+），可能直接解决该问题。

修改后的完整代码示例 #

// container7
var chartOptions = {
    chart: {
        type: 'column',
        inverted: true,
        height: 200
    },
    title: {
        text: ''
    },
    xAxis: {
        lineColor: 'white',
        categories: ['ABCD'],
        labels: {
            padding: 40,
            style: {
                fontSize: '12px'
            }
        }
    },
    yAxis: {
        allowDecimals: false,
        max: 100,
        title: {
            text: ''
        },
        labels: {
            enabled: false
        },
        gridLineWidth: 0
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                useHTML: true,
                style: {
                    color: 'black',
                    fontSize: '13px',
                    textShadow: 'none !important',
                    backgroundColor: 'transparent !important',
                    padding: 0,
                    margin: 0
                },
                formatter: function() {
                    return `<span style="text-shadow: none; background: transparent;">${this.series.name}: ${Highcharts.numberFormat(this.y, 0)}%</span>`;
                }
            }
        }
    },
    colors: ['#d37295', '#fabfd2'],
    series: [{
        name: 'LLLL!',
        data: [57]
    }, {
        name: 'XYZM',
        data: [43]
    }],
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    }
};

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>

内容的提问来源于stack exchange，提问作者newuser