Change the Presentation of a Bar Chart - same problem in D3 8

Tell us what’s happening:
It won’t let me pass the test.
However, the Chrome Inspector says that my 1st bar is 120 with 2 margin, 2nd bar is 310 with 2 margin.
< div class=“bar” style=“height: 120px;”>
< div class=“bar” style=“height: 310px;”>

Error says: (I wish it would allow me to copy it)
The first div should have a height of 120 pixels and a margin of 2 pixels.
The second div should have a height of 310 pixels and a margin of 2 pixels.

Your code so far


<style>
  .bar {
    width: 25px;
    height: 100px;
    /* Add your code below this line */
    margin: 2px;
    /* Add your code above this line */
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      // Add your code below this line
      .style("height", (d) => (d * 10 + "px"))
      
      // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:

2 Likes

Have you, by any chance, found the solution to this? It’s really annoying and still isn’t fixed. Hope that it’s just an oversight on my part, but I think it’s a bug. Thanks

Yeah, it’s a problem with Chrome. For example, it sets height to 119.99 instead of 120. If anyone runs into this problem, just use a different browser.

I have been trying to figure it out for almost an hour now. mind you i am working on it with chrome