In my graph when you mouse over the graph you should get a sky blue box. It’s not working and it should. I can’t find the mistake… if anyone can see it. It would be very helpful.
.on("mouseover", (d, i) => {
const tooltip = document.getElementById("tooltip");
tooltip.setAttribute("x", i * barWidth + padding);
tooltip.setAttribute("y", yScale(d[1] - padding));
});
Are you sure you can multiply i * barWidth? What is the type of i? You might want to do a console.log(i) at the beginning of this handler.
x and y are NaN and undefined and I don’t know why ???
Did you add the console.log I suggested to see what the value if i being passed in is? You can’t do i * barWidth because i isn’t something you can multiply. Look at what it is and then I think you will see why you are getting NaN.
I didn’t look closely at d since i is the first problem you need to fix. Are you sure that d[1] is what you want to use?
I got nothing for I blank screen for the tooltip I got NaN and undefined for x and y
I am completely at a loss.
I’m still not sure if you added the console.log I suggested to the beginning of the handler function? If so, did you then open the browser dev tools console tab and see what it printed in the console when you clicked on the graph? If so, please tell me it printed.
the console. log was empty i can do a screenshot
Well, you are trying to do i * barWidth in the handler. Can you multiply an array by a number?
AH, I see. ok, I will work on that. Just didn’t click in my head for some reason.
So console.log(i); in .on(‘mouseover’, (d, i) => {…}); should solve your tooltip.innerHTML undefined problem. This is enough for it to pass tests. All there’s left is x and y attributes.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.