Issue
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/
Answered By - Paweł Fus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.