D3 bar chart project | please help!

Hi all,

I don’t seem to be able to pass all the user stories even though it looks like I should clear them all (maybe i do no understand the user stories well). Anyways, I would really appreciate if you could spare a few minutes to look at my code.
here is the link to my Codepen project:

Here are where the user stories are failing:

  1. User story # 5
    Please ignore this. I reduced the number of data points to see what’s going on (line # 5 on the JS file)

  2. User story # 10:
    it says " the data-date attribute and its corresponding bar element should align with the corresponding x value on the x-axis"
    It looks to me that the bars are properly aligned to the x-axis. Can someone explain me what the problem is here?

  3. User story # 12 (tooltip #1)
    It says when i hover over a bar, a tooltip with id=tooltip should be seen that display more info about the bar. My chart does all that, yet it does not pass this story. Please help!

  4. User Story # 13 (tooltip #2)
    it says " My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area."
    My chart does that and still does not pass this requirement. If someone can explain to me what am i miss, i’d really appreciate.

Thanks a bunch !!

Hey ,

Dunno if it’s the issue, but why do you use band scale for dates?

that’s what the internet told me to use for bar charts. what do you suggest i use for the x-axis?

Try using scaleTime. Once the x values are sorted, it should help pass user story # 10.

As for the tooltip, sadly appending the title itself doesn’t pass the test although it works functionally. A seperate div has to be appended for the tooltip. The below link could help:

Time scale

@Annestezia @manjupillai16 Thanks a million guys! Using scaleTime worked like a charm. I was finally able to the all the user stories after creating a new div for the tooptip. Thank you soo much!


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