简体   繁体   中英

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;
                    }
                }
            }
        }
    }

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/

dataLabels: {
      enabled: true,
      format: '{point.y}',
       style: {
          textOutline: false 
           }
        },

use text-shadow:none !important; for the tag tspan

CSS

tspan{
    text-decoration:none;
    text-shadow:none !important;
}

FIDDLE DEMO

worked for me...

dataLabels: {
                enabled: true,
                color: 'white',
                style: {
                    // textShadow: false 
                    textOutline: false
                }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM