Bar Chart X Axis labels not appearing

JavaScript
1

I’m working on the Bar Chart project for the Data viz certification, and I’m running into some trouble getting the xAxis labels to appear. Relevant code is as follows:

 const xAxisGenerator = d3.axisBottom().scale(xScale).ticks(14);
   const xAxis = bounds
     .append('g')
     .call(xAxisGenerator)
     .attr('id', 'x-axis')
     .style('transform', `translateY(${dimensions.boundedHeight}px)`);

   const xAxisLabel = xAxis
     .append('text')
     .attr('x', dimensions.boundedWidth / 2)
     .attr('y', dimensions.margin.bottom - 10)
     .attr('fill', 'black')
     .style('font-size', '1.4em');

I’m using the same approach for the scatterplot chart, and it’s working just fine there, so I’m not sure what the problem is. Full code is at: https://github.com/dylanesque/BarChart

2

Hi @dylanesque. I have noticed the date you are parsing is in the format YYYY-MM-DD. Try replacing the code below:

const dateParser = d3.timeParse('%Y')

with

const dateParser = d3.timeParse('%Y-%m-%d');

Take note I was running your code using version 6.1.1, while you are on version 5 but I believe there won’t be any difference.

3

Yes, I figured this out last night! For anybody else that encounters this issue, time formatting is very strict and has to be exact: https://stackoverflow.com/questions/64094840/x-axis-ticks-not-appearing-in-d3

1 Like