The axes on my D3.JS GDP project is kicking my butt

Hey everyone,

On the above project I cannot figure out how to make my axis and my bar chart overlap. I’ve already gone to stack overflow for help but was not able to get an answer. Would anyone be able to tell me how to fix my code on this project?

I’ll try to get you started in the right direction. First, I would wrap one big div around all of the svg elements on the page. Set the position of that div to relative. This will allow you to position the svg elements in relation to that div.

The first svg element on your page is taking up a lot of height and thus forcing the remaining svg red bars below it. There is something you can do to prevent this. It has to do with positioning. It removes the element from the normal flow of things and thus the remaining svg elements will not respect its height and will no longer be pushed beneath it.

Hopefully this should give you enough of nudge to get what you want.

1 Like

Hey, thanks so much, that made it a lot easier. This whole time I thought the issue was how I was setting up D3.JS, but it was actually my CSS XD.

1 Like