Bar Chart is not visible

JavaScript
1

Hey guys! My bar chart is not visible. I have been stuck here for weeks. What am I not doing right. Someone kindly help!!!Tell us what’s happening:

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 9; Nokia 3.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36.

Challenge: Visualize Data with a bar chart Graph

Link to the challenge:
https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-bar chart-graph

2

This will not completely solve your problem, but will take you one step further.

Go to the end of your javascript and add

}
3

Hello there.

You have many typos in your code. Start by doing what @JanShah suggested, then use the CodePen tool to analyse your JavaScript.

Hope this helps

4

I have added the curled bracket and analyzed the is/css’/html and no errors have been found. I cannot notice the typos you talked about. My chart is still not visible :pensive:

5

Press F12, go to the console tab and look at any errors that originate from Codepen (pen.js:someLineNumber)

6

Errors:

  1. Line 29
  2. Line 38
  3. Line 40
  4. Line 83

I leave you to find the errors.

Lastly, opacity has a maximum value of 1. It should be of type number. Also, this logic does not make sense, or there is a simple typo in the following:

svg.on('mouseout', () => {
    tooltip.attr('opacity', 0);
    });
  svg.on('mouseout', () => {
    tooltip.attr('opacity', '100');
    });
7

@Bshaddie Can you please update your topic title to something more descriptive instead of a Codepen link? Thank you.

8

I have done the necessary corrections on the errors you highlighted and here is where I am now
https://codepen.io/Bshaddie/pen/KKpJVgO

9

You have not fixed Line 40. Nor have you corrected the svg.on function…

10

https://codepen.io/Bshaddie/pen/KKpJVgO

11

This is what I see on line 40:

for (let i=0; i<data.lenght; i+=tickStep) {

Also, please read this documentation opacity

Hope this helps

12

I have read the opacity documentation and tried to follow it up but I just seem not to make headways. I have tried applying the instructions but nothing is making sense😔

13

Not to worry. All I wanted to put emphasis on is the fact that the values for opacity must be numbers and between 0 and 1 inclusive.

So, Line 40 just has one single letter out of place, and your final function involving opacity needs to be passed a number between 0 and 1, not a string '100' as you have done.

After this, you will pass all tests.

14

Thank you @Sky020 I managed :pray:

15