code: function drawGridLines(xTicks, yTicks) {
              svg.select('.grid-lines-group')
                  .selectAll('line')
                  .remove();
  
              if (grid === 'horizontal' || grid === 'full') {
                  horizontalGridLines = svg.select('.grid-lines-group')
                      .selectAll('line.horizontal-grid-line')
                      .data(yScale.ticks(yTicks))
                      .enter()
                        .append('line')
                          .attr('class', 'horizontal-grid-line')
                          .attr('x1', (-xAxisPadding.left - 30))
                          .attr('x2', chartWidth)
                          .attr('y1', (d) => yScale(d))
                          .attr('y2', (d) => yScale(d));
              }
  
              if (grid === 'vertical' || grid === 'full') {
                  verticalGridLines = svg.select('.grid-lines-group')
                      .selectAll('line.vertical-grid-line')
                      .data(xScale.ticks(xTicks))
                      .enter()
                        .append('line')
                          .attr('class', 'vertical-grid-line')
                          .attr('y1', 0)
                          .attr('y2', chartHeight)
                          .attr('x1', (d) => xScale(d))
                          .attr('x2', (d) => xScale(d));
              }
  
              //draw a horizontal line to extend x-axis till the edges
              baseLine = svg.select('.grid-lines-group')
                  .selectAll('line.extended-x-line')
                  .data([0])
                  .enter()
                    .append('line')
                      .attr('class', 'extended-x-line')
                      .attr('x1', (-xAxisPadding.left - 30))
                      .attr('x2', chartWidth)
                      .attr('y1', height - margin.bottom - margin.top)
                      .attr('y2', height - margin.bottom - margin.top);
          }
docs: Draws grid lines on the background of the chart
  @return void