dealing with highcharts bar chart with really long category names

Question

I have a bar chart built with Highcharts that uses categories for its x-axis--really long wordy categories. I can't figure out a good way to make sure categories always stay on one line. I cannot abbreviate them unless I can use a tooltip or something to show the long version upon mouse hover-over or some other intuitive user interaction. When the categories line-wrap, it starts to look like a wall of text.

Any ideas for displaying long categories and data in a clean way? I'm willing to consider a different type of chart as long as it displays the data in a clear and nice-looking way. I'd like to stick with Highcharts but only if possible.

EDIT: After much effort, I've given up on the idea of adding a tooltip to an x-axis category label in a cross-browser (IE6+) way. Even with JQuery it doesn't seem possible or practical. I'm still looking for any solution which allows me to display these long categories nicely (I'm not happy with the fiddle I created earlier because hovering over the data bar is not obvious enough to the user).

A picture of the problem graph, with categories blacked out: Labels too long, going to next line

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

if you move the tool -tip to external div to have a better format is that's answering your question — Mina Gabriel
– Mina Gabriel, Commented Jul 18, 2012 at 14:16
Yes, although I've considered this option already. Any idea how to get the coordinates of the category labels? — AlexMA
– AlexMA, Commented Jul 18, 2012 at 14:21

Markus Hay · Accepted Answer · 2013-04-24 03:41:55Z

21

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

});

edited Apr 24, 2013 at 3:41

answered Apr 24, 2013 at 3:24

Markus Hay

1,0101 gold badge11 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Lo Over a year ago

Where could we find the definition of .js-ellipse style? Thanks for sharing this solution.

wolfsbane Over a year ago

an efficient way would be to use: var labelTooltip = '<style type="text/css">.labelTooltip{cursor:pointer} </style>'; $("head").append(labelTooltip); return '<div class="labelTooltip" style="overflow:hidden" title="' + text + '">' + formatted + '</div>';

tnkh Over a year ago

I figured out the same solution as this. But this is not appealing either. Wondering whether anyone or Highcharts has figured out a way where there is an option to wrap up long labels into numbers of lines that can be specified, and truncate the rest with ellipsis.

Mina Gabriel · Accepted Answer · 2014-02-27 21:44:28Z

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

edited Feb 27, 2014 at 21:44

answered Jul 18, 2012 at 14:41

Mina Gabriel

25.5k26 gold badges101 silver badges128 bronze badges

5 Comments

AlexMA Over a year ago

Good answer--this may help. I will give you credit if a better answer doesn't come along. The only problem with this answer is it doesn't resolve the problem of category labels along the x-axis line wrapping when the screen size is is small or the labels really big: see jsfiddle.net/a6zsn/1

Mina Gabriel Over a year ago

you haven't told me what exactly is your plan with the category string

AlexMA Over a year ago

I need to be able to see the full, long version somewhere, but it can't line-wrap when it's an x-axis label. An abbreviation is okay as long as the full category label is view-able (somewhere). I might create an array of short labels mapped to an array of long-labels then use your jquery tooltip technique to create a custom tooltip. If there is an easier solution though I'd love to see it.

AlexMA Over a year ago

I think this is enough to get me going. I will use the formatter to added some ellipses to the x-axis label after a certain number of characters then use your tooltip with the full text.

Mina Gabriel Over a year ago

see my final jsfiddle all you need to add to it is looping through the category

Geek · Accepted Answer · 2014-06-02 09:55:31Z

4

Trim the labels

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

answered Jun 2, 2014 at 9:55

Geek

1,4051 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

dealing with highcharts bar chart with really long category names

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related