работа с гистограммой highcharts с очень длинными названиями категорий

У меня есть гистограмма, построенная с помощью Highcharts, которая использует категории для своей оси x ---очень длинных словесных категорий. Я не могу найти хороший способ убедиться, что категории всегда остаются на одной строке . Я не могу сокращать их, если только я не могу использовать всплывающую подсказку или что-то еще, чтобы показать длинную версию при наведении курсора мыши -или каком-либо другом интуитивно понятном взаимодействии с пользователем. Когда строка категорий -переносится, она начинает выглядеть как стена текста.

Любые идеи для отображения длинных категорий и данных в чистом виде ? Я готов рассмотреть другой тип диаграммы, если он отображает данные в ясном и приятном -виде. Я хотел бы придерживаться Highcharts, но только если это возможно.

РЕДАКТИРОВАТЬ: После долгих усилий я отказался от идеи добавления всплывающей подсказки к метке категории по оси x -в кросс -браузере (IE6+ ). Даже с JQuery это кажется невозможным или практичным. Я все еще ищу какое-нибудь решение, которое позволит мне красиво отображать эти длинные категории (Мне не нравится скрипка , которую я создал ранее, потому что наведение курсора на панель данных недостаточно очевидно для пользователя. ).

Изображение проблемного графа с затемненными категориями :

Код JSFiddle:

HTML:

Джаваскрипт:

$(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]
                }]
            });
        });
    });