Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
                    }
                }
            }
        }
    }
like image 800
WOUNDEDStevenJones Avatar asked Mar 13 '15 06:03

WOUNDEDStevenJones


2 Answers

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/

like image 64
Paweł Fus Avatar answered Nov 20 '22 18:11

Paweł Fus


dataLabels: {
      enabled: true,
      format: '{point.y}',
       style: {
          textOutline: false 
           }
        },
like image 5
Pankaj Upadhyay Avatar answered Nov 20 '22 16:11

Pankaj Upadhyay