Bars Not Appearing

Hello,

I’m working on the Sass Bar Chart project, and none of the “rect” elements are showing up in the browser window.

Any ideas?

Here is my index.html

<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1>Top Ten Most Produced Foods in the World, by Tonnes</h1>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
</body>

Here is my main.scss.

$top-foods: ("Sugar Cane" 1898),
("Corn" 1017),
("Rice" 738),
("Wheat" 711),
("Cow Milk" 635),
("Potatoes" 374),
("Vegetables" 279),
("Soy Beans" 278),
("Cassava" 263),
("Sugar Beets" 247);

$diamond-blue: rgba(0, 159, 255, .6);
$sea-green: rgba(10, 165, 153, .6);
$pale-green: rgba(167, 240, 213, .6);

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  padding-bottom: 20px;
  color: #434444;
}

span {
  display: block;
}

rect {
  width: 24px;
  float: left;
  padding-left: 25px;
  padding-top: 7px;
  white-space: nowrap;
  word-break: break-all;
  position: relative;
  bottom: 0px;
  font-size: 12px;
  color: #707070;
  font-family: 'Montserrat', sans-serif;
  &:before {
    display: inline-block;
    -webkit-transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
  }
  &:after {
    position: absolute;
    top: -15px;
    left: 0px;
  }
}

@each $food, $tons-produced in $top-foods {
  $i: index($top-foods,($food $tons-produced));
  rect:nth-child(#{$i + 1}) {
    height: #{$tons-produced/3}px;
    &:before {
       content: $food;
    }
    &:after {
      content: $tons-produced + "m";
    }
  }
}

@if($i % 2 -- 0){
  background-color: fade-in($sea-green, $i*5/100);
} @else if($i % 3 == 0) {
  background-color: fade-in($pale-green, $i*5/100);
} @else {
  background-color: fade-in($diamond-blue, $i*5/100);
}

Thanks in advance for your help!

Blaine

I seem to be having the same issue… :frowning:

1 Like

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