Search code examples
javascriptcsshighcharts

Remove shadow/background glow on highcharts data label?


If you check out my http://jsfiddle.net/WOUNDEDStevenJones/oe1vcmqj/1/, the red labels on the chart have a subtle white glow behind them (in at least Chrome and FF). How do I remove that white glow? Or worst case at least change the color to the same blue so it blends in?

I've tried using shadow, backgroundColor, and other properties from their API (http://api.highcharts.com/highcharts#plotOptions.column.dataLabels), but can't figure out what is defining that glow behind the red text.

plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                color: 'red',
                inside: false,
                xHigh: -45,
                xLow: -9999999,
                shadow: "#ff0000",
                formatter: function () {
                    if (this.point.high) {
                        var myDate = new Date(this.y);
                        var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth(),myDate.getUTCDate());
                        return '<b>' + Highcharts.dateFormat('%m/%e',newDateMs) + '</b>';
                    } else {
                        return null;
                    }
                }
            }
        }
    }

Solution

  • Set dataLabels.styles.textShadow to false.

        plotOptions: {
            columnrange: { // or general options: "series: { ... }"
                dataLabels: {
                    enabled: true,
                    color: 'red',
                    style: {
                        textShadow: false 
                    }
                }
            }
        },
    

    Demo: http://jsfiddle.net/oe1vcmqj/2/

    EDIT:

    Since Highcharts 5.0.3, the option name is textOutline.

        plotOptions: {
            columnrange: { // or general options: "series: { ... }"
                dataLabels: {
                    enabled: true,
                    color: 'red',
                    style: {
                        textOutline: false 
                    }
                }
            }
        },
    

    Demo: http://jsfiddle.net/oe1vcmqj/49/

    EDIT v2.0:

    Since Highcharts 5.0.13, the textOutline option should be a string, so to disable outline, set textOutline: 'none'.

        plotOptions: {
            columnrange: { // or general options: "series: { ... }"
                dataLabels: {
                    enabled: true,
                    color: 'red',
                    style: {
                        textOutline: 'none' 
                    }
                }
            }
        },
    

    Demo: http://jsfiddle.net/BlackLabel/s7ejvhmu/