title: Legend in Multi line chart - d3
body: <p>While adding a legend to my multi line graph my result is:
  <img src="https://i.stack.imgur.com/7Tk8n.png" alt="enter image description here"> </p>
  
  <p>The passed ,failed etc... are half visible.
  code:</p>
  
  <pre><code>   var margin = {top: 20, right: 20, bottom: 30, left: 50},
  width = 1090 - margin.left - margin.right,
  height = 339 - margin.top - margin.bottom;
  
   var x = d3.scale.linear()
  .range([0, width]);
  
     var y = d3.scale.linear()
  .range([height, 0]);
  
    var color = d3.scale.category10();
  
    var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");
  
  var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");
  
    var line = d3.svg.line()  
  .interpolate("linear")
  .x(function(d) { return x(d.days); })
  .y(function(d) { return y(d.testRuns); });
  
   var svg = d3.select("#application_status_graph").append("svg")
  .attr("width", width + margin.left + margin.right + '0%')
  .attr("height", height + margin.top + margin.bottom)
   .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
   d3.json("js/lineChartData.json", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) {return key !== "days"; }));
     data.forEach(function(d) {
      d.days = parseInt(d.days);
     });
  
     var status = color.domain().map(function(name){
  return{
      name: name,
      values: data.map(function(d){
          return {days: d.days, testRuns: +d[name]};
      }) 
  }
     });
      x.domain(d3.extent(data, function(d) { return d.days; }));
  
  y.domain([0, d3.max(status, function(c) { return d3.max(c.values, function(v) {           return v.testRuns; }); })]);
     svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
  
     svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Number of Test Runs");
  
  var legend = svg.selectAll('.city')
      .data(status)
      .enter().append('g')
      .attr('class', 'legend');
  
  legend.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });
  
  legend.append('rect')
      .attr('x', width - 20)
      .attr('y', function(d, i){ return i *  20;})
      .attr('width', 10)
      .attr('height', 10)
      .style('fill', function(d) { 
        return color(d.name);
      });
  
  legend.append('text')
      .attr('x', width - 8)
      .attr('y', function(d, i){ return (i *  20) + 9;})
      .text(function(d){ return d.name; });
  
   });
  </code></pre>
  
  <p>I have played around the width all around the code. But i couldn't acheive the following:</p>
  
  <p><img src="https://i.stack.imgur.com/qBd7G.png" alt="enter image description here"></p>
  
  <p>Any suggestions? Thanks.</p>