score:21

Accepted answer

Try this fiddle: http://jsfiddle.net/a6zsn/70/

We had a similar issue which we eventually solved by allowing the labels to use HTML. While we didn't go with the exact solution posted below, this should work for you as it uses the jQueryUI tooltip widget to show the full text on hover.

Note how I'm defining the xAxis.labels object.

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                events: {
                    load: function (event) {
                        $('.js-ellipse').tooltip();
                    }
                }
            },
            title: {
                text: 'Historic World Population by Region'
            },
            subtitle: {
                text: 'Source: Wikipedia.org'
            },
            xAxis: {
                categories: ['Africa is the best place to do safari.  Label is soooo big that it iss ugly now.  =(.  -38023-8412-4812-4812-403-8523-52309583409853409530495340985 ', 'America is the best place you can ever live in ', 'Asia is the best food ever ', 'Europe best chicks ever on earth ', 'Oceania i dont know any thing about this place '],
                title: {
                    text: null
                },
                labels: {
                    formatter: function () {
                        var text = this.value,
                            formatted = text.length > 25 ? text.substring(0, 25) + '...' : text;

                        return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>';
                    },
                    style: {
                        width: '150px'
                    },
                    useHTML: true
            }
            },
            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]
            }]
        });
    });

});

score:4

Trim the labels

xAxis: {
            categories: ['Foo afkhbakfbakjfbakfbnbafnbaf', 'Bar', 'Foobar'],
            labels: {
                formatter: function() {
                    return this.value.substring(0, 8);
                }
            }
        },

score:6

working jsFiddle

moving the tool tip :

HTML

    <div id='mytoolTip'></div>‚Äč

JavaScript

    tooltip: {
            formatter: function() {

               $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
                return false ; 
            }
        },

this is how you can get the category name from the tool-tip hovering

      this.key

jsFiddle


Related Query

More Query from same tag