Remove shadow/background glow on highcharts data l

2019-01-24 00:14发布

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

3条回答
\"骚年 ilove
2楼-- · 2019-01-24 01:10

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

CSS

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

FIDDLE DEMO

查看更多
聊天终结者
3楼-- · 2019-01-24 01:12

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 property name is textOutline.

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

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

查看更多
Bombasti
4楼-- · 2019-01-24 01:13
dataLabels: {
      enabled: true,
      format: '{point.y}',
       style: {
          textOutline: false 
           }
        },
查看更多
登录 后发表回答