I'm wondering that the color of the text which is inside the bar chart(plotOptions.bar.dataLabels.color) can be different if the text doesn't fit to bar length. For instance:
Code is here:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
height: 700
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.2,
dataLabels: {
enabled: true,
color: 'black',
align: "right",
format: '{y} M',
inside: false,
style: {
fontWeight: 'bold'
},
verticalAlign: "middle"
},
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 2.33]
}]
});
});
Thanks in advance
Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. For example: http://jsfiddle.net/Yrygy/176/
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<span style="color: ' + color + '">' + this.y + ' M</span>';
},
You can also compare point's width with length of y-value string.
I use the "isInside" value like so:
series: [{ name: 'Percentage', data: this.calculateChartSeries(), dataLabels: { enabled: true, rotation: 0, align: 'right', borderWidth: 1, formatter: function() { if (this.point.isInside == true) { return '<span style="color: white">' + this.y + '%</span>'; } else { return '<span style="color: black">' + this.y + '%</span>'; } } } }]
But if that doesn't work for you, it's possible to use "this.point.shapeArgs.height" and check if that height is greater than the length of your text.
You can set the color to contrast
, and it will change depending on whether the dataLabel is inside/outside the bar.
style: {
color: 'contrast'
}
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.