I have a chart which has attribute column.grouping set to false, and I would like to show data labels only on highest columns. Here is an example
dataLabels: {
enabled: true
}
I have tried to find solution for couple hours now, I would appreciate any help.
You can write a formatter for the dataLabel that checks if it's the highest for that yAxis, here's the API documentation: http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
After comments: You can take the data out of the chart object and use a formatter to pick the largest one, fiddle: http://jsfiddle.net/7zc5peyf/1/
var em = [150, 73, 20];
var eo = [140, 90, 40];
data label code:
data: em,
dataLabels:{
enabled: true,
formatter: function(){
if(this.y > eo[this.point.index]){
return this.y;
}
}
}
you can use
chart.yAxis[0].max;
or
this.dataMax
to get maximum value. to compare , in formatter function compare both and retrun larger one.
I think it would be the easiest to use point.dataLabels.enabled
option. Just preprocess data before rendering the chart, to determine which points should display values, see: http://jsfiddle.net/9f1maj3x/
And code:
function enableLabels(d_1, d_2) {
// compare two data series and enable dataLabel for a higher column:
$.each(d_1, function (i, point) {
if (point > d_2[i]) {
d_1[i] = {
dataLabels: {
enabled: true
},
y: d_1[i]
}
} else {
d_2[i] = {
dataLabels: {
enabled: true
},
y: d_2[i]
}
}
});
return [d_1, d_2];
}
Data example:
var data = [
[150, 73, 20],
[140, 90, 40],
[103.6, 178.8, 198.5],
[203.6, 198.8, 208.5]
];
var leftColumns = enableLabels(data[0], data[1]),
rightColumns = enableLabels(data[2], data[3]);
And example in Highcharts:
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: leftColumns[0],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: leftColumns[1],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: rightColumns[0],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: rightColumns[1],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
Here is my solution:
$(function () {
var something = {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo']
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
series: {
events: {
hide: function () {
console.log(this);
},
show: function () {
console.log(this);
},
legendItemClick: function () {
for (var i = 0; i < something.series.length; i++) {
if (something.series[i].name === this.name) {
something.series[i].visible = !this.visible;
}
}
console.log(this.name);
}
}
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
visible: true,
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[1].data[index]) || !something.series[1].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
visible: true,
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[0].data[index]) || !something.series[0].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
visible: true,
data: [193.6, 128.8, 144.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[3].data[index]) || !something.series[3].visible) {
return this.y + '*';
}
return '';
}
}
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
visible: true,
data: [123.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[2].data[index]) || !something.series[2].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}]
};
$('#container').highcharts(something);
});
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.