D3: Bar Chart Challenge - The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis

JavaScript
1

I don’t know what I need to fix, after running the test suite I still have 1 error to fix:

10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.

Capture
Capture846×327 17.9 KB

This is link to my codepen for project
https://codepen.io/falkhateeb/pen/OJROJmz

Appreciate your help.

2

Hi @elmsafer83!

The problem in your code is that for the axes you’re creating separate scales.

xScale = d3.scaleBand()
  .domain(gdpRecords)
  .range([0, width])

xAxisValues = d3.scaleTime()
  .domain([dates[0], dates[dates.length - 1]])
  .range([0, width]);

xAxisTicks = d3.axisBottom(xAxisValues)

The values don’t align because of the different scales.

Generally you define a scale, then use this scale to create axis and if you want the ticks of the axis to have a different format you use tickFormat.

The usual pattern looks something like this:

const xScale = d3.scaleBand()
  .domain(...)
  .range(...);

const xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.fromat("d"));

I hope it’ll help you :wink:

3

@sitek94 thanks a lot for help :blush:

4

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