Add Legend To Chart With D3 V4 Angular-cli

I am using D3 charting library to create charts with Angular-cli. D3 version is 4.2.2. I create a multi-line chart and here is I am trying to add legend to the chart. Following cod

Solution 1:

Add this in the code for adding new rect and text:

legend.append("rect")
  .attr("x", width - 18)
  .attr("y", 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", "steelblue");

// draw legend text
legend.append("text")
  .style("font", "14px open-sans")
  .attr("x", width - 24)
  .attr("y", 18)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text("Searches");