D3.js Bar Chart Test 10 Fail

JavaScript
1

Run into a problem with one test case:
10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
Find number of posts with this issue, but none of them have worked for me.
I am already using new Date() and d3.scaleTime() , but it did not help.
Would be great, if somebody can take a look!

Bar Chart

2

Here is the code

fetch('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json')
.then((response) => response.json())
.then((data) => {
   DrawBar(data);
})

function DrawBar(data) {
	let margin = {top: 10, bottom: 20, left: 60, right: 20},
	width = 1050 - margin.left,
	height = 550 - margin.bottom;
	const padding = 60;

	const minDate = new Date(data.from_date.substring(0, 4));
	const maxDate = new Date(data.to_date.substring(0, 4));
	console.log(minDate, maxDate);


	const xScale = d3.scaleTime()
		.domain([minDate, maxDate])
		.range([padding, width - margin.right]);

	const yScale = d3.scaleLinear()
		.domain([0, d3.max(data.data, (d) => d[1])])
		.range([height - padding, padding]);

	const xAxis = d3.axisBottom(xScale)
	const yAxis = d3.axisLeft(yScale);

	var svg = d3.select(".chart")
		.append("svg")
		.attr("width", width)
		.attr("height", height)

	var g = svg.append("g")

	svg.append("g")
    .attr("id", "x-axis")
		.attr("transform", "translate(0," + (height - padding) + ")")
		.call(xAxis);

	svg.append("g")
  .attr("id", "y-axis")
		.attr("transform", "translate(" + padding + ",0" + ")")
		.call(yAxis);

	let Tooltip = d3.select(".chart")
		.append("div")
		.attr("class", "tooltip")
    .attr("id", "tooltip");

	var mouseover = function(event, d) {
		Tooltip
		.html("<strong>" +  "Billions: " + "</strong>"+ d[1]  + " $" + "<br>"
		+ "<strong>" + "Year - Mounth: " + "</strong>"+ d[0].substring(0, 7))
		.style("opacity", 1)
     Tooltip.attr("data-date", d[0]);
	}

	var mousemove = function(event, d) {
		Tooltip
		.style("left", (event.x) + "px")
		.style("top", (event.y) + "px")
	}
	var mouseleave = function(event, d) {
		Tooltip
		.style("opacity", 0)
	}

	g.selectAll(".bar")
		.data(data.data)
		.enter()
		.append("rect")
    .attr("data-date", (d) => d[0])
    .attr("data-gdp", (d) => d[1])
		.attr('transform', 'translate(' + margin.left + ',0)')
		.attr("class", "bar")
		.attr("x", (d, i) => i * ((width - margin.right - margin.left) / data.data.length))
		.attr("y",(d) => yScale(d[1]))
		.attr("width", (width - margin.right - margin.left) / data.data.length)
		.attr("height", (d) => (height - padding) - yScale(d[1]))
		.on('mouseover', mouseover)
		.on('mousemove', mousemove)
		.on('mouseleave', mouseleave);
}
3

It’s passing all tests for me (recent vanilla chrome), so unless you’ve fixed the problem you likely have some local issue with your browser or computer (extensions, weird configuration, time zone misconfiguration, etc.).

4

Issue Solved, problem was with maxDate format and number of months in it. Just added 3 more months and it worked.