chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let p = d3.line()([[0,y(0)], [width, y(0)]]) svg.append("path") .attr("d", p) .attr('stroke', "#A6AEB9") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", "24px") .attr("y", "36px") .attr("text-anchor", "left") .text("Average time to resolve PR’s") .classed('chart-label', true); svg.append("text") .attr("x", "24px") .attr("y", "106px") .attr("text-anchor", "left") .text(avgTimeOC) .classed('chart-label-value', true); // Bars add svg .selectAll('rect') .data(rawIssuesData) .enter() .append('rect') .attr('class', 'bar') .attr('x', d => x_band(timeParser(d[0]))) .attr('y', d => y(d[1])) .attr('width', x_band.bandwidth()) .attr('height', d => y(0)-y(d[1])) .attr('fill', "#2135E5") .attr('opacity', 1) .on('mouseover', function(event, data){ let tooltipData = ""; tooltipData+= ""; tooltipData+=""; svg.call(tip) tip.show(event, tooltipData); }) .on('mouseout', tip.hide); svg .selectAll('bar2') .data(rawIssuesData) .enter() .append('rect') .attr('class', 'bar2') .attr('x', d => x_band(timeParser(d[0]))) .attr('y', d => y(0)) .attr('width', x_band.bandwidth()) //x.bandwidth() .attr('height', d => y(0)-y(Math.abs(d[2]))) .attr('fill', "#A6AEB9") .attr('opacity', 1) .on('mouseover', function(event, data){ let tooltipData = ""; tooltipData+= ""; tooltipData+=""; svg.call(tip) tip.show(event, tooltipData); }) .on('mouseout', tip.hide); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }