DC.js making chart container or div wider to show legend properly

I am creating multiple pie chart. Each pie chart resides in a div. All of my pie charts are getting rendered next to each other. I want to give some spacing between them so that is looks nicer and legend can be accommodated properly.

I tried increasing width of chart, that did not help. I also tried assigning a width to div. That did not work either.

Suggestions ?



If you want space between charts just put in a margin.

var margin = {
    top: 20,
    right: 20,
    bottom: 90,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

Next create the svg with those margins in mind,

 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

Then append a group to the svg which will contain your pie chart. Translate the group right a distance margin.left and translate it down a distance margin.top, like this,

  var pie = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Note the origin of the coordinate system is top left and the yaxis is positive increasing down.