dojox charting long labels on x axis

Trying to debug a weird issue with labels in 1.6.1

by brianarn

HTML

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js.uncompressed.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/tundra/tundra.css">
<div id="memoryChart" class="chart"></div>

CSS

h1, h2, h3, h4, h5, h6, embed, object, svg {
  font-family: LeagueGothic, Impact, sans-serif;
  font-weight: normal;
  margin-bottom: 16px;
}

h3 {
  color: #666666;
  margin-bottom: 3px;
}

div.chart {
  width: 500px;
  height: 250px;
  margin: 5px auto 0px auto;
}

JavaScript

dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.Theme");
dojo.require("dojox.charting.plot2d.ClusteredColumns");

dojo.addOnLoad(function() {
    var mychart = new dojox.charting.Chart2D("memoryChart");

    mychart.addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true,
                                font: "normal normal 10pt Arial",
                minorTicks: false,
                majorTick: {color: "black", length: 6},
                htmlLabels: true,
           labelFunc : function(value){
               var breakStr = (dojo.version.major === 1 && dojo.version.minor === 6) || dojo.isIE ? "\n" : "<br>";
               return "vijays long long label".replace(/(.{8}[^\s]*)/g, "$1" + breakStr);
           } }).
                        addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
                        addPlot("default", { type: "ClusteredColumns", gap: 10 }).
        addSeries("series1", [ { y: 2, xLabel: 'vijay'}, { y: 4, xLabel: 'vijay'}, { y: 3, xLabel: 'vijay'}, { y: 5, xLabel: 'vijay'}, { y: 2, xLabel: 'vijay'}, { y: 4, xLabel: 'vijay'}] ).
                        render();
});