src/charts/line.js
/**
         * Draws grid lines on the background of the chart
         * @return void
         */
Draws grid lines on the background of the chart
@return void
Draws grid lines on the background of the chart @return void
function drawGridLines(xTicks, yTicks){
            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));
            }
            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);
        }
function drawGridLines ( xTicks , yTicks ) { 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 ) ) ; } 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 ) ; }
Draws grid lines on the background of the chart
 @return void
Draws grid lines on the background of the chart @return void
//draw a horizontal line to extend x-axis till the edges