Traiter avec graphique à barres highcharts avec des noms de catégories vraiment longues

J'ai un graphique à barres intégré avec Highcharts qui utilise les catégories de son axe x-vraiment long verbeux catégories. Je ne peux pas comprendre une bonne façon de s'assurer que les catégories de toujours rester sur une ligne. Je ne peux pas les abréger, sauf si je peux utiliser une info-bulle ou quelque chose à montrer la version longue sur survolés par la souris ou de certains autres intuitive interaction de l'utilisateur. Lorsque les catégories de la ligne, ça commence à ressembler à un mur de texte.

Des idées pour l'affichage des longs catégories et les données de manière propre? Je suis prêt à envisager un autre type de graphique, tant qu'il affiche les données de façon claire et jolie. J'aimerais rester avec Highcharts, mais seulement si cela est possible.

MODIFIER:
Après beaucoup d'efforts, j'ai renoncé à l'idée d'ajouter une info-bulle à l'axe x de la catégorie de l'étiquette dans un multi-navigateur (IE6+). Même avec JQuery, il ne semble pas possible ou pratique. Je suis toujours à la recherche de toute solution qui me permet d'afficher ces catégories bien (je ne suis pas heureux avec le violon j'ai créé plus tôt parce que planant au-dessus de la barre de données n'est pas suffisamment visible pour l'utilisateur).

Une photo du problème graphique, avec catégories de noir:

JSFiddle Code:

HTML:

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id='mytoolTip'></div>

Javascript:

$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa blahblahblah blah blah blah ', 'America blahblahblah blah blah blah ', 'Asia blahblahblah blah blah blah', 'Europe blahblahblah blah blah blah ', 'Oceania blahblahblah blah blah blah '],
title: {
text: null
},
labels: {
formatter: function() {
return(this.value.substring(0,10) + "...");
}
}                            
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() { 
$("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
return false ; 
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
});

source d'informationauteur AlexMA