score:0

The default behavior of Highchart is to wrap the label value in a <tspan> tag inside of a <text> tag. Both of those tags seem to get "white-space: nowrap" as a default browser behavior so they do not wrap.

Your jsFiddle example is specifically setting the white-space to "normal" which will allow the text wrap when appropriate. It is acceptable to wrap text on a hyphen so your labels with "Jan-2005" (et al) are going to wrap. If you simply remove the "whiteSpace: 'normal'," element from the style block, they no longer wrap. If you really wanted to make sure they do not wrap you could even change it "whiteSpace: 'nowrap',".

Additionally, the example you linked in your comment does not use HTML so Highchart is actually stripping out your <a> tag but is nice enough to convert your href="javascript:alert()" code into an onclick event for the <tspan>

score:1

Set style width for your labels inline, see: http://jsfiddle.net/yg2SF/8/

            formatter: function() {
                return '<div style="width:70px" onclick="alert(\''+this.value+'\')">'+this.value+'</div>';    
            }

To your comment:
<a> tags are translated to SVG, <div> tags with custom onclick aren't.


Related Query

More Query from same tag