Highcharts Single Row Stacked Horizontal Bar: Labels Overlap --- Bar Segments Too Small To Read "datalabels" --- (change "distance" Of "datalabels"?)

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

Solution 1:

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.