1

Problem: overlapping and thus unreadable dataLabels in single row stacked horizontal bar.

User aus_lacy has kindly helped me to be able to implement the following code (especially in this answer):

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:500px; height: 300px"></div>

JS (needs jQuery)

$(function(){$('#container').highcharts({chart:{backgroundColor:'gray',type: 'bar'},colors:['white'],credits:{enabled:false},title: {text:'Head and neck cancers (HNC)'},
xAxis:{categories:['Estimated 5-year prevalent cancer cases (×1000)'],lineWidth: 0,tickWidth:0,labels: {enabled:false,}},
yAxis:{min:0,title:{text:''},gridLineWidth:0,lineWidth:0,labels:{enabled:false,} }, legend: {enabled:false },
plotOptions: { series: { stacking: 'normal', borderColor: 'black' }, bar: { dataLabels: {enabled: true, distance : -50, formatter: function() { var dlabel = this.series.name + '<br>'; dlabel += Math.round(this.percentage.toFixed(1)*100)/100 + ' %'; return dlabel }, style: { color: 'black', }, }, }, },
series: [{ name: 'Oceania', data: [17]} , { name: 'Africa', data: [94]}, { name: 'Latin America and Carribean', data: [122]} , { name: 'Northern America', data: [181]}, { name: 'Europe', data: [383]},{ name: 'Asia', data: [886] } ] });});

His answer was completely perfect, but as now I want to use a new implementation, some bar segments got too small to reveal the text of the dataLabels (see the rendered code above).

Perhaps ... or dead ends?

  • The distance:-50, inside dataLabels:{...} (inside plotOptions:{bar:{...}) doesn't seem to work any longer.

I think if this distance were working, this might offer a solution, since if one e.g. adds distance: 100, inside dataLabels:{...} in the standard pie chart, one can clearly notice the difference. But a pie chart is obviously not a single row stacked horizontal bar?

  • Perhaps another option would be to use the useHTML-option (see the Highcharts API entry), although I can't figure out how to get things working.

  • I think the easiest would be to have each next dataLabel slightly below the previous one? Could anyone achieve this? More or less brakes (<br>'s) inside certain dataLabel's would create more possibilities, but I can not achieve this atm.

  • ... something more elegant?

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28

1 Answers1

0

A fix I have found is to rotate the dataLabels.

  • Putting a rotation rotation:-45 inside dataLabels:{...} and change '<br>' inside formatter:function(){var dlabel=…} to ': ' (to have single-line-labels. An additional brake (<br>) can be added before Oceania to improve readability (unfortunately I can't seem to be able to add more <br>'s).

Which gives the following code (copy the HTML from the question):

JS (needs jQuery)

$(function(){$('#container').highcharts({chart:{backgroundColor:'gray',type: 'bar'},colors:['white'],credits:{enabled:false},title: {text:'Head and neck cancers (HNC)'},
xAxis:{categories:['Estimated 5-year prevalent cancer cases (×1000)'],lineWidth: 0,tickWidth:0,labels: {enabled:false,}},
yAxis:{min:0,title:{text:''},gridLineWidth:0,lineWidth:0,labels:{enabled:false,} }, legend: {enabled:false },
plotOptions: { series: { stacking: 'normal', borderColor: 'black' }, bar: { dataLabels: {enabled: true, distance : -50, rotation:-45, formatter: function() { var dlabel = this.series.name + ': '; dlabel += Math.round(this.percentage.toFixed(1)*100)/100 + ' %'; return dlabel }, style: { color: 'black', }, }, }, },
series: [{ name: '<br>Oceania', data: [17]} , { name: 'Africa', data: [94]}, { name: 'Latin America and Carribean', data: [122]} , { name: 'Northern America', data: [181]}, { name: 'Europe', data: [383]},{ name: 'Asia', data: [886] } ] });});

Unfortunately, for better results, the width might perhaps be enlarged in the HTML-code, which is to be avoided.

Further more: now we achieved a full line-spacing extra on one dataLabel, but it would be better to move this Label only 1/2 that distance, or only 1/3 of that distance; and move the surrounding Label('s) the same distance, away from the overlapping Label; for a more evenly spaced lay-out.

O0123
  • 481
  • 9
  • 28