Line_Chart_Months

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    }
    .grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}
    
  </style>
</head>

<body>
  <svg width="450" height="450" id="svg2"></svg>
  <script>
    var svg = d3.select("#svg2"),
                        margin = {top: 20, right: 20, bottom: 30, left: 50},
                        width = +svg.attr("width") - margin.left - margin.right,
                        height = +svg.attr("height") - margin.top - margin.bottom,
                        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%-m-%Y");

var x = d3.scaleTime()
                        .rangeRound([0, width]);

var y = d3.scaleLinear()
                        .rangeRound([height, 0]);

// gridlines in y axis function
function make_y_gridlines() {		
    return d3.axisLeft(y)
        .ticks(12)
};

function draw() {
                        var data = [{"leads_created_date_month": 1, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 2, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 3, "leads_created_date_year": 2016, "total": 0.5}, {"leads_created_date_month": 4, "leads_created_date_year": 2016, "total": 0.1667}, {"leads_created_date_month": 5, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 6, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 7, "leads_created_date_year": 2016, "total": 0.125}, {"leads_created_date_month": 8, "leads_created_date_year": 2016, "total": 0.125}, {"leads_created_date_month": 9, "leads_created_date_year": 2016, "total": 0.3}, {"leads_created_date_month": 10, "leads_created_date_year": 2016, "total": 0.1786}, {"leads_created_date_month": 11, "leads_created_date_year": 2016, "total": 0.2609}, {"leads_created_date_month": 12, "leads_created_date_year": 2016, "total": 0.2778}, {"leads_created_date_month": 1, "leads_created_date_year": 2017, "total": 0.0}, {"leads_created_date_month": 2, "leads_created_date_year": 2017, "total": 0.1111}, {"leads_created_date_month": 3, "leads_created_date_year": 2017, "total": 0.2593}, {"leads_created_date_month": 4, "leads_created_date_year": 2017, "total": 0.1765}, {"leads_created_date_month": 5, "leads_created_date_year": 2017, "total": 0.2593}, {"leads_created_date_month": 6, "leads_created_date_year": 2017, "total": 0.2414}, {"leads_created_date_month": 7, "leads_created_date_year": 2017, "total": 0.1842}, {"leads_created_date_month": 8, "leads_created_date_year": 2017, "total": 0.1724}, {"leads_created_date_month": 9, "leads_created_date_year": 2017, "total": 0.2222}, {"leads_created_date_month": 10, "leads_created_date_year": 2017, "total": 0.1818}, {"leads_created_date_month": 11, "leads_created_date_year": 2017, "total": 0.2593}, {"leads_created_date_month": 12, "leads_created_date_year": 2017, "total": 0.1905}, {"leads_created_date_month": 1, "leads_created_date_year": 2018, "total": 0.2}, {"leads_created_date_month": 2, "leads_created_date_year": 2018, "total": 0.1818}, {"leads_created_date_month": 3, "leads_created_date_year": 2018, "total": 0.1667}] ;

data.forEach(function (d) {
                            d.leads_created_date_month_year = parseTime(d.leads_created_date_month + "-" + d.leads_created_date_year);
                        });

x.domain(d3.extent(data, function (d) {
                            return d.leads_created_date_month_year;
                        }));
                        y.domain(d3.extent(data, function (d) {
                            return d.total;
                        }));

g.append("g")
                            .attr("transform", "translate(0," + height + ")")
                            .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%-m-%Y")))
                            .select(".domain")
                            .remove();

g.append("g")
                            .call(d3.axisLeft(y))
                            .append("text")
                            .attr("fill", "#000")
                            .attr("transform", "rotate(-90)")
                            .attr("y", 6)
                            .attr("dy", "0.71em")
                            .attr("text-anchor", "end")
                            .text("Conversion Rate");

g.append("path")
                            .datum(data)
                            .attr("fill", "none")
                            .attr("stroke", "steelblue")
                            .attr("stroke-linejoin", "round")
                            .attr("stroke-linecap", "round")
                            .attr("stroke-width", 1.5)
                            .attr("d", line);
                      
                        // add the X gridlines
  											g.append("g")			
      											.attr("class", "grid")
      											.attr("transform", "translate(0," + height + ")")
      											.call(make_x_gridlines()
          									.tickSize(-height)
          									.tickFormat(""));

// add the Y gridlines
  											g.append("g")			
      											.attr("class", "grid")
      											.call(make_y_gridlines()
          									.tickSize(-width)
          									.tickFormat(""));
                    };

draw();

</script>
</body>

https://d3js.org/d3.v4.min.js