D3 Bar Chart project, can't get axes to render to the svg

Hi, as the title says I’m having trouble getting my axes to render to the svg. My actual bar chart is currently showing properly, although I can’t get the d3.scaleTime() function to work and am using a workaround right now.

The main problem though is that no matter what I try I cannot get the axes to show. I thought it was a problem with the padding and they were trying to render past the edges of the svg canvas but I tried messing around with the transform property as well as making sure there was room on the svg for them and they still aren’t showing up.

I’m pretty sure they won’t be correct with the way my code is set up right now but that would be easier to fix it if I could actually see them in the first place.

Here’s the codepen: https://codepen.io/malarix/pen/qBpzZLK

Would really appreciate any help here as I’m currently out of ideas!

This is the problem:

    chart.append('g')
         .attr('transform', `translate(${padding}, ${padding})`)
         .attr('id', 'y-axis')
         .call(yScale);

You’re calling the scale and not the axis. Same fix will work for the x-axis once its scale is working.

1 Like

Thank you so much!! I checked and rechecked those parts and still didn’t see the problem, feeling pretty dumb right now but at least I can make some progress now!

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