Bar chart challenge ticks not showing

Hey all,
I’ve begun the d3.js bar chart challenge here on freecodecamp, and I can’t seem to get the ticks on the x-axis to show. Also, I can’t figure out why the y-axis /is upside down. Thanks!

Hello @b3u,

To get the ticks working properly, you will need to convert the date strings to actual Date objects by wrapping your date string with new Date(d[0]). You will also need to set the minimum value for your domain - this can be done pretty easily in D3 by using d3.extent - .domain(d3.extent(

For your y-axis, you can swap the minimum and maximum value in your range. If you do this, you may end up changing the appearance of your bars and may need to adjust. You could also create a separate scale to use just for the y-axis.

1 Like

@cmccormack Thanks for the help. Second tip worked, first did not. Any ideas? I just converted d[0] into dates, and passed the array into the domain of the x-axis.

You did not use extent or set a minimum value and maximum value; this is required for the domain in the way you are implementing the method. It will not take the full array as an argument but instead two values to correspond to the range

Try using


instead of


and it should work fine.
d3.extent is the same as supplying a two element Array with the min and max follows, similar to the following:

.domain([d3.min(yearsDate), d3.max(yearsDate)])
1 Like

Thanks so much. Just wondering, i didn’t see extend in the docs, so i don’t know what it does, but don’t i just need to pass in an array of dates like yearDate?

You can find the documentation for d3.extent here as well as the documentation for d3.scaleTime here

… but don’t i just need to pass in an array of dates like yearDate ?

This is precisely what I did in my example above using extent. If you meant to the domain, then you may need to read the documentation to see if there is a way to do that. You may need to have a range that corresponds one-to-one, though, if it is possible.

1 Like