function drawCustomLines(){
            svg.select('.custom-lines-group')
                .selectAll('line')
                .remove();

            let yValues = customLines.map(line => line.y);

            let getColor = yValue => {
                const definedColor = customLines.find(line => line.y === yValue).color;
                if(definedColor) {
                    return definedColor;
                }

                return defaultCustomLineColor;
            }

            //draw a horizontal line to extend x-axis till the edges
            verticalLines = svg.select('.custom-lines-group')
                .selectAll('line.custom-line')
                .data(yValues)
                .enter()
                  .append('line')
                  .attr('class', 'custom-line')
                  .attr('x1', 0)
                  .attr('x2', chartWidth)
                  .attr('y1', (d) => yScale(d))
                  .attr('y2', (d) => yScale(d))
                  .attr('stroke', (d) => getColor(d))
                  .attr('fill', 'none');

            // draw the annotations right above the line at the right end of the chart
            for(let line of customLines) {
                if (line.name) {
                    svg.select('.custom-lines-group')
                        .append('text')
                        .attr('x', chartWidth)
                        .attr('y', yScale(line.y) - 6)
                        .attr('class', 'custom-line-annotation')
                        .attr('text-anchor', 'end')
                        .attr('dominant-baseline', 'baseline')
                        .text(line.name);
                }
            }
        }
Draws custom user-defined lines onto the chart
@return void