I managed to create a bar chart using dimple.js and now I am attempting to add legends using d3.js. Although I have successfully added the legends, the legend text is overlapping and I need a way to wrap the text if it exceeds the space allocated for each legend. Additionally, I would like to display only two legends in a row but due to limited space, the third legend is currently hidden. My goal is to bring the third legend down to the second row.
http://jsfiddle.net/keshav_1007/qgn9gaec/3/ - you can view my fiddle here
var yMax = 1.2;
var svg1 = dimple.newSvg("body", 360, 360);
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 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;
var vert = i * height - offset;
return 'translate('+horz+',260)';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', '#333333')
.style('stroke', '#333333');
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d,i) {
console.log(dataChart[i].Brand);
return dataChart[i].Brand; });
myChart.draw();
Thank you for your assistance.