score:1

This demo may help. I have spliced long texts at a fixed length (Here 10) and calculated x the y position for every third legend.

var yMax = 1.2;
var svg1 = dimple.newSvg("body", 360, 860);
var dataChart = [{
    "Brand": "Aaaaaaaaaaaaaaaaaaaaaa",
        "Day": "Mon",
        "SalesVolume": 10
}, {
    "Brand": "Bbbbbbbbbbbbbbbbbbbb",
        "Day": "Mon",
        "SalesVolume": 20
},
                {
    "Brand": "Ccccccccccccccccc",
        "Day": "Mon",
        "SalesVolume": 20
}];
var myChart = new dimple.chart(svg1, dataChart);
myChart.setBounds(120, 10, 200, 200)
var dummy = ['aaaaaaaaaaaaaaaaaa','bbbbbbbbbbbbbbb','c'];
var x = myChart.addCategoryAxis("x", "Day");
var y = myChart.addPctAxis("y", "SalesVolume");
y.overrideMax = yMax;
y.addOrderRule("SalesVolume");
var s = myChart.addSeries("Brand", dimple.plot.bar);
s.barGap = 0.7;
var horz = 0;
var legendRectSize = 18; 
var legendSpacing = 4;
var vert = 260;
var legend = svg1.selectAll('.legend')  
          .data(dataChart)  
          .enter()
          .append('g') 
          .attr('class', 'legend') 
          .attr('transform', function(d, i) { 
              var height = legendRectSize + legendSpacing;
              var offset =  120;
              horz = horz + offset;
              if((i+1)%3 == 0){
                 vert += 100;
                 horz = 0 + offset;
              }
              return 'translate('+horz+','+vert+')';
          });

     legend.append('rect')
          .attr('width', legendRectSize)
          .attr('height', legendRectSize)
          .style('fill', '#333333')
          .style('stroke', '#333333');

     legend.each(function(d,i){        
          var cLegend = d3.select(this);
          // 10 is the fixed length based on which the long texts are spliced.
          var texts = d.Brand.match(/.{1,10}/g);
          texts.forEach(function(text, i){
              cLegend.append('text') 
        	      .attr('x', legendRectSize + legendSpacing)
          	      .attr('y', legendRectSize - legendSpacing+(i*25))
                  .text(text);
           });
     });

      myChart.draw();
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query