Legend In Multi Line Chart - D3

While adding a legend to my multi line graph my result is: The passed ,failed etc... are half visible. code: var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 1

Solution 1:

To achieve this, you need to do two things. First, restrict the x range of the graph itself so it doesn't extend too far. The easiest way to do this is by adjusting the range of your x scale:

var x = d3.scale.linear()
          .range([0, width-20]);

Second, you need to adjust the coordinates of the legend:

legend.append('rect').attr('x', width - 30)

and similarly for the other elements. On a general note, you may prefer moving the entire legend group instead of each element individually, i.e. you would move the group like so:

var legend = svg.append("g")
                .attr("transform", "translate(" + (width - 30) + ",20)")
                .selectAll('.city')
                .data(status)
                ...

Then the coordinates of the legend elements are local to this group and moving the entire legend only requires adjusting the coordinates of the g element.