y-Axis is getting cut off

JavaScript
1

Hey guys I noticed that the y-Axis isn’t fully showing 18,000. The solution has the same issue. This kind of annoys. Anybody a hint how to display this properly ?

Heres the link to my pen :

2

I too had a headache setting up the Cartesian axes. Once you figure out how to move the elements it becomes clearer. I suggest you copy the code somewhere and start experimenting without fear of breaking everything.

If you want to move your yAxis you can give to the translate function a value that is bigger than zero.

svgBG.append("g")
  .attr("transform", "translate(" + 60 + ", 0)")
  .call(yAxis);

As you can see he second argument of the translate function is zero in your case.

You can also move the yAxis by altering the range of the yScale

const yScale = d3.scaleLinear().domain([0, gdpMax]).range([height - 60, 0]);
1 Like
3

Hello there,

This can be a real headache, but can be simply remedied. Google D3 margin convention. Hope this helps.

1 Like
4

@Slimattcode @Meimato thanks to both of y’all this really helped me

and by the way this page is far from finished I just gave the SVG some background color and played around with the d3 library to place the bars properly

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.