highcharts ampersand

Question

How can I make the ampersand display properly under the first set of bars/columns in this chart:

http://jsfiddle.net/VxbrK/2/

It should be 'Apples & Oranges' not 'Apples & Oranges'.

Answer 1

You can set useHTML as true for labels.

xAxis: {
                labels:{
                    useHTML:true
                }
            },

Answer 2

The html entities display is seriously bugged: http://forum.highcharts.com/viewtopic.php?f=9&t=7299&p=35653

In my experience I found that the better workaround is to use the unicode escape sequence instead of entities.

Answer 3

If you decide to go for the unicode escape sequence, keep in mind entities like é won't directly translate to /u0233 but to /u00E9 (the hexidecimal value). the conversion list can be found here: http://en.wikipedia.org/wiki/List_of_Unicode_characters.