Failing three tests on Visualize Data with a Bar Chart project

[dlongosaviola]

Tell us what’s happening:
In the Visualize data with a bar chat project, I am failing User Story #10 and #12 and #13. I cannot figure out why

Your code so far

Visualize Data with a Bar Chart

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14150.74.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.114 Safari/537.36

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

freeCodeCamp.org

[jeremy.a.gray]

Looks like you solved most of it. To finish the tooltips, you need to add something like

  svg.selectAll('rect')
    .data(data)
    .enter()
    ...
    .attr('data-date', d => d[0])
    .attr('data-gdp', d => d[1])

for your tooltip as well, which it appears you have started to do. Also, this code

    .on('mouseover', (d, i) => {
      ...
      tooltip.setAttribute('data-date', d[0])

      tooltip.innerHTML = `
        <small>${d[0]}</small>
        $${d[1]} billions`; 
  })

is failing because you are using the old event callback signature (datum, index) with D3v7, which uses the signature (event, datum). This code is passing an undefined event (d, and then you are trying to access an element it doesn’t have) into your HTML leading to the ‘undefined’ in the tooltip. It is also passing an undefined into the data-date attribute.